web-dev-qa-db-ja.com

this.state vs state in React

私は新しいコードベースで作業しています。通常、私はReactコンポーネントでこのような状態を設定します：

class App extends React.Component {
    constructor() {
        super();
        this.state={
            foo: 'bar'
        }
     }
    ....

この新しいコードベースでは、次のようなことが多く見られます。

class App extends React.Component {
    state={
        foo: 'bar'
     }
    ....

この方法で行うことには利点がありますか？彼らは、状態を変更する必要がない場合にのみそれを行うようです。私は常に状態が何かであると考えていましたReact処理されます。これは大丈夫ですか？

javascriptreactjsstatereact-props
8
J Seabolt

両方のアプローチの最終結果は同じです。どちらのアプローチも、コンポーネントの初期stateを設定するだけです。 クラスプロパティはステージ3の提案です であるため、すべての開発環境で使用できない場合があります。

個人的には、コンストラクタで他に何も行わない場合はクラスフィールドバリアントを使用します。これは、記述するコードが少なく、心配するsuper呼び出しがないためです。

例

class Component1 extends React.Component {
  state = { value: this.props.initialValue };

  render() {
    return <div> {this.state.value} </div>
  }
}

class Component2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.initialValue };
  }

  render() {
    return <div> {this.state.value} </div>
  }
}

function App() {
  return (
    <div>
      <Component1 initialValue={1} />
      <Component2 initialValue={2} />
    </div>
  );
}
8
Tholle

実際、両方ともthisポインターにバインドします。 thisのconstructorで作成されたclass。

完全にthis.stateでローカル状態にアクセスできますが、最初のスタイルではpropsでconstructorにsuperを渡してから、以下のようにstate宣言で使用できます。

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            foo: 'bar',
            jaz: props.someParentState,
        }
     }
....

すごい、propsのconstructorにアクセスできますが、きれいではありませんか？私は間違いなくこのスタイルをローカル状態の宣言に使用します。

これがお役に立てば幸いです。

3
AmerllicA