React：直接値割り当てを使用してコンポーネントの状態を更新していますか？

Question

私はReactを初めて使用し、コンポーネントの状態で自分のコンポーネントだけが必要とする情報を格納しています。 this.setStateコールの非同期性に問題があります。

this.state.stateKey = newValueと直接的に状態値を割り当てるだけで、私はこれを回避しました。 this.setStateが私にとってうまくいかず、直接割り当てがどう機能するのかを具体的に示す短いサンプルケースについては、以下を参照してください。

import React from 'react'; 

export default class Test extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     testVal : "Enter new text here" 
    } 
} 
    runTest = (evt) => { 
     // if I run the test with the below line, the value 
     // in state is not updated before the console.log 
     this.setState({testVal: evt.target.value}); 

     // if I run the test with the below line, the value 
     // in state is loaded before the console.log call, 
     // and I do get a print of the new value 
     this.state.testVal = evt.target.value; 

     console.log("testVal: ", this.state.testVal); 
    } 

    render =() => { 
     return(
     <div> 
      Test 
      <input 
       class="form-control" 
       type="text" 
       defaultValue={this.state.testVal} 
       onBlur={this.runTest} 
      /> 
     </div> 
     ) 
    } 
} 

私の質問はthis.state.stateKey = newValueを使用して直接代入して状態を更新するに何か問題ありますか？他の回避策がありますが、これについては言及していません。それが間違っているはずです。ありがとう。

Answer 1

ステートの変更を比較してレンダリングを最適化する方法のため、状態の不変なクローンを作成することは良いアイデアです。

shouldComponentUpdateなどのライフサイクルメソッドでは、nextPropsが渡され、this.propsと比較できます。

状態を直接変更すると、nextProps.somepropとthis.props.somepropは常に同じになるため、予想される動作が得られない場合があります。

React docも

がSETSTATE（）、その後、あなたが作った突然変異を置き換えることを呼び出すと、直接this.stateを変異決して言います。それが不変であるかのようにthis.stateを扱う。