React知识梳理

jiezi

6 年前

首先 React 是单页应用时期出现的框架，它适合开发单页应用，随之配套的构建工具 webpack、node 环境。

传统 UI 操作关注太多 DOM 的 API 细节。
React 帮助我们不必过多关注 DOM 的 API 实现细节，React 对 DOM 进行了更高级别的抽象。
使用 React 元素，描述我们的页面，细节的渲染，交给 React 去做。我们只需要告诉 React, 我写了什么组件，什么标签，什么事件就好了。

使我们开发页面，是组件化思想去开发，HTML、CSS、JS 合为一体。比如我们创建一个标签，并给它样式和事件

  let div = document.createElement('div')
  div.style.color = "red"
  div.innerHTML = "HTML 标签"
  div.onclick = function() {// 描述这个标签做什么交互}

  class App extends Component {makeAction = () => {// div 标签做的交互}
     
     render() {return <div style={{color:"red"}} onClick={this.makeAction}> React 元素 </div>
     }
  }

React 是什么？
React 是一个 UI 库，可以帮你描述页面标签该如何展示。
React 以组件化的方式，写标签。所有的页面都可以拆分成一块块组件。

React 的出现，让前端开发者可以不用过多关注 DOM 的 API 细节，我们只需要声明式的使用 React 写入我们想要的标签，React 就会帮我们去渲染它。

如果建立一个 React 项目呢？首先去官网，需要 Node 的环境，加上 Git 的环境。都可以去官网下载。

第一步：使用 npx create-react-app 命令创建一个 React 项目
我知道使用 JSX 语法加上 React.createElement、ReactDOM.render、React.Component，只需要两个 API 就可以把我们写的标签，浏览器便可以展示出来。

JSX 只是一个语法糖，它可以将 javaScript 文件里的 <div> 转换成 React.createElement(‘div’)

所以对于 React.createElement、ReactDOM.render 方法使用要知道。


React.createElement(eleType, attribute, text)
ReactDOM.render(fn, string, class, node)

React.createElement(type,)创建和返回固定的元素。
React.render()方法，传入两个参数，第一个是对象，第二个是根节点
React.Component 组块化方式开发页面里面的 render 方法
this.setState 配合有状态组件更新整个 DOM？
组件传入参数都在 props 里面

    <App name="rong" />
    
    function App(props){return <div>{props.name}</div>
    }
    
    class App extends React.Component {render() {return <div>{this.props.name}</div>
        }
    }

JSX 语法是 JavaScript 语法糖，本质动态创建 React 组件，也是 React.createElement 新一层封装

const menu = {Item: function(){return <div> 来吧 </div>} }

//JSX 语法
ReactDOM.render(<menu.Item />)
//JavaScript 原生语法
ReactDOM.render(React.createElement(menu.Item))

React 通信，也是单向数据传递的。组件的 props 传递给内部组件，内部组件传递给内内部组件。

如何构建大型项目没有解决，如何管理大型项目的数据状态没有解决。

React知识梳理

React 解决了什么问题？

JSX 语法本质和使用

组件的生命周期和方法

组件通信

React 没有解决什么问题？