React給state賦值的兩種寫法

如果你看過React的官方文檔，就會對怎么給局部state賦值有一定的了解。如下代碼：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
　　　　name:'李磊'
　　};
    // 為了在回調中使用 `this`，這個綁定是必不可少的
　  this.handleClick = this.handleClick.bind(this);
  }

　handleClick(){
　    this.setState({name:'王磊'});
　}
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>{this.state.name}.</h2>
　　　　　<button onClick={handleClick}>測試</button>
      </div>
    );
  }
}

 官方文檔指出，如果你使用class組件並使用state、定義一些方法，那么需要注意以下3點：

1. 需要在 class 構造函數 constructor中為 this.state 賦初值！
2. 需要在 constructor中調用super(props)，否則無法使用this.props;
3. 在javascript中，class的方法默認不會綁定this, 如果你忘記綁定this.handleClick並把它傳入了onClick,當你調用這個函數的時候this 的值是undefined

但是，你是不是也見過這樣的代碼，如下：

class Test extends React.Component {
   state = { name:'李磊' };
　　handleClick = ()=>{
　　　 this.setState({name:'王磊'});
　　}
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>{this.state.name}.</h2>
　　　　　<button onClick={handleClick}>測試</button>
      </div>
    );
  }
}

它更簡潔，不用以上注意以上三點，只要直接定義state對象中的變量即可（注意不是this.state)

這種寫法叫做public class fields 語法，Create React App 默認啟用此語法。

一個簡單的方法可以比較兩者寫法到底有什么不同，那就是使用babel的Try it out 來驗證下吧。為了output的代碼更具可讀性，所以我選擇了es2016

 可以放大頁面看，圖片不能看原圖

 第一種寫法：

 

 

 第二種寫法：

對比babel轉換后的代碼可以看出，第二種寫法其實state也是定義在了constructor中。