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