簡單的了解了 React，創(chuàng)建了一個 React 項目，了解 React 的基本構(gòu)成組件，學(xué)習(xí)了一些簡單的 JSX 語法，在 React 中需要注意一下幾點：

constructor(props) {
  super(props);
  this.state = {
    list: ['item1', 'item2']
  };
}

列表唯一標識 —— key

React 中對于列表進行遍歷時，React 要求對于列表的每一項都有一個特殊的標識來識別它們，稱為 key。

render() {
  return (
    <ul>
      {
        this.state.list.map((item, index) => {
          return <li key={index}>{item}</li>;
        })
      }
    </ul>
  );
}

修改 state 中的數(shù)據(jù)

React 中的所有操作都是對于數(shù)據(jù)進行操作，React 檢測到數(shù)據(jù)變更會自動更新 DOM，但是如果我們直接對于 state 中的數(shù)據(jù)進行操作，DOM 不會改變，要使用 React 中的特定方法來對于數(shù)據(jù)進行操作。

handleAdd() {
  // this.state.list.push('hello world');    // DOM 不會更新
  this.setState({
    list: [...this.state.list, 'hello world']
  });
}

React 元素響應(yīng)事件方法中的 this

如果我們直接對于 React 組件中的方法進行 this 的調(diào)用，比如調(diào)用 this.state，會提示報錯，那是因為對于 handleBtnClick 方法來說，它的 this 指向的是調(diào)用它的對象，也就是 button 元素。所以如果我們想要在 handleBtnClick 方法中調(diào)用 this.state.list 而不報錯的話，我們需要在 onClick 的表達式中把組件的 this 通過 bind 方法傳入以改變函數(shù)中 this 的指向。

handleBtnClick() {
  console.log(this.state.list);
}

render() {
  return (
    <div>
      <button onClick={this.handleBtnClick.bind(this)}>Add</button>
    </div>
  );
}