React官网总结

核心概念：

1. Babel会把JSX转义成一个React.createElement() 函数调用。
   实际代码：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

React.createElement() 会预先执行一些检查，其实是建立了一个对象。

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为React元素。元素是构成React的最小砖块。元素是一个对象。

1. 如何将React元素渲染成DOM？
   想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一块儿传入 ReactDOM.render()

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

1. 如何更新已渲染的DOM?
   React元素是一个不可变的对象。就至关因而电影中的每一帧对应的都是不一样的UI。因此按照咱们以前将React元素渲染成DOM的方法，咱们只有把新的React元素渲染到DOM节点中，传入ReactDOM.render()
2. React只更新它须要更新的部分
   ReactDOM 会将元素和以及子元素和它以前的状态对比。
3. 组件和props
   5.1 组件至关因而UI的拆分，为了实现复用。就至关于一个函数，经过props（至关于参数）灌入数据，经过state维持自身状态。返回React元素。
   5.2 props是只读的。
   引入一个概念——纯函数 函数内部不会修改入参，而且屡次传入相同入参返回的结果都是同样的。

4. state和生命周期
   state是内部状态 是私有的
   正确使用state:
   6.1 不要直接修改state
   6.2 state的更新是异步的
   解决： 给state传入一个函数，还能够传一个回调函数

   this.setState((state, props) => ({
   counter: state.counter + props.increment
   }));

   6.3 state更新会被合并的

5. 数据是向下流动的
6. 列表和key
   key 帮助 React 识别哪些元素改变了，好比被添加或删除。所以你应当给数组中的每个元素赋予一个肯定的标识。key须要在兄弟节点间是惟一的。而不是全局。
   一般咱们使用id来做为key，用索引来作key不太好。并且key的设定一般是数组最近的上下文。一个经验之谈就是在map数组的时候设置key
7. 表单
   提一个概念，受控组件：向表单那样，数据源是react的state提供，每次输入过程当中发送的操做也是react控制。输入的值始终由 React 的 state 驱动。
   例如：

<form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
</form>

1. 生命周期 以前的版本挂载constructorrendercomponentDidMount更新componentWillReceivePropsshouldComponentUpdatacomponentWillUpdatarendercomponentDidUpdata卸载componentWillUnmount