关于react.js: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. 生命周期 之前的版本
   挂载
   constructor
   render
   componentDidMount
   更新
   componentWillReceiveProps
   shouldComponentUpdata
   componentWillUpdata
   render
   componentDidUpdata
   卸载
   componentWillUnmount