外围概念：

  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