stateの初期化について。(constructor,class fields proposal?)

ReactHooksを試している時に、stateの初期化についていくつかの疑問が出てきました。
以下に同じ処理を行う、書き方が違うコードを載せます。

1つ目

React.js
1class App extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { count:0 }
5  }
6  render() {
7    const { count } = this.state;
8    return (
9        <div>
10          <p>
11           <button onClick={() => this.setState({count: count -1})}>-</button>
12            <b>{count}</b>
13           <button onClick={() => this.setState({count: count +1})}>+</button>
14          </p>
15        </div>
16    );
17  }
18}

2つ目

React.js
1class App extends React.Component {
2  state = { count:0 };
3  render() {
4    const { count } = this.state;
5    return (
6        <div>
7          <p>
8           <button onClick={() => this.setState({count: count -1})}>-</button>
9            <b>{count}</b>
10           <button onClick={() => this.setState({count: count +1})}>+</button>
11          </p>
12        </div>
13    );
14  }
15}

【1つ目の疑問】
・1つ目と2つ目のコードでは同じstateの初期化を行っているのか？

【2つ目の疑問】
・1つ目のconstructor内ではthis.stateとthisが必要であるが、2つ目ではなぜthisが必要ではないのか。

【３つ目の疑問】
・これらの疑問を調べていた結果class fields proposalという用語にたどり着きました。
しかし、これがなにを意味しているのかがわかりませんでした。。。ES7で提案された儀式??

疑問が多くて申し訳ありません。。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascriptの class ブロックは、オブジェクト定義の方法におけるシンタックスシュガーに過ぎません。

古典的な手法でオブジェクトを定義すると、非常に多くのコードを書くとこになります。

javascript
1function App(props){
2  React.Component.call(this,props); // 親オブジェクトを呼ぶ
3  this.state = { count:0 };
4}
5// 継承の設定
6App.prototype = React.Component.prototype;
7App.prototype.constructor = App;
8
9// メンバ (class fields)
10App.prototype.render = function() {
11  const { count } = this.state;
12  return (
13    <div>
14      <p>
15        <button onClick={() => this.setState({count: count -1})}>-</button>
16          <b>{count}</b>
17          <button onClick={() => this.setState({count: count +1})}>+</button>
18      </p>
19    </div>
20  );
21};

class ブロックによって 1つ目, 2つ目と短く書けるように変わっています。

・1つ目と2つ目のコードでは同じstateの初期化を行っているのか？

いえ、1つ目は、コンストラクタ関数(Ctor)内で、state プロパティを初期化していますが、
2つ目は、コンストラクタ関数の[[Prototype]]に定義されたオブジェクトを分割代入することで、stateプロパティは初期化する必要がなくなっています。

class ブロックの書き方が変わったというのもあります。
1つ目はプロパティを書くシンタックスシュガーが実装されておらず、関数内で state プロパティに代入する必要があった。2つ目はその制約が解消され、分割代入の恩恵により [[Prototype]] に予め定義されている state の count(プリミティブ) を参照するだけでよくなった。