SETSTATE | | JSX構文変換|コンポーネントのアップデートメカニズム[] 100分の6原則に反応リアクト

****キーワード| SETSTATE | JSX構文変換|コンポーネントアップデートメカニズム

コンポーネントのアップデートメカニズム

2のSETSTATE（）アクション
- 変更状態
- アップデートコンポーネント
プロセス：親コンポーネント、サブアセンブリが再レンダリングされるときに再レンダリングが、唯一の電流成分のサブツリー（そのすべてのサブコンポーネントに電流成分）をレンダリングします

コンポーネントのパフォーマンスの最適化

状態を削減

状態を減少させる。のみ関連するデータをレンダリングコンポーネントに格納されている（例えば：カウント/リストデータ/ローディング、等）
注：Doがの状態でレンダリングするデータをしません
複数の方法で使用されるデータのためのこの必要性は、この中に配置する必要があります

不要な再レンダリングを避けます

コンポーネントの更新メカニズムは：親コンポーネントのアップデートは、思考のこのラインは非常に明確である、サブコンポーネントも更新されている原因になります
質問：そのままサブアセンブリを再レンダリングするとき
あなたは、不要な再レンダリングを避ける場合は？
解決方法：フック関数のshouldComponentUpdate（nextProps、nextState）
- この機能では、nextPropsとnextState状態とプロパティが最新の状態にあります
役割：この関数は値を返し、それがtrueを返した場合、代表者は再レンダリングする必要があり、それが偽を返す場合、代表者が再描画する必要はありません
トリガタイミング：更新位相フック関数、コンポーネントの実行を再レンダリングする前に、（shouldComponentUpdate =>レンダリング）

// 生成随机数
class RandomNumber extends React.Component {
    state = {
        number: 0
    };
    btnHandlerClicked = () => {
        this.setState((state, props) => {
          return {
              number: Math.ceil(Math.random() * 3)
          }
        })
    };

    // 两次生成的随机数可能相同，如果相同就没必要重新渲染
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('nextProps: ',nextProps ,' -- nextState： ' , nextState , ' -- nextContext' , nextContext , ' -- this.state', this.state);
        if(nextState.number !== this.state.number || nextProps.sendnumber !== this.props.sendnumber){
            return true;
        }
        return false;
    }

    render() {
        console.log('render -- ');
        return (
            <div>
                <h2>随机数: {this.state.number}</h2>
                <button onClick={this.btnHandlerClicked}>clickedMe create random number</button>
            </div>
        )
    }
}

// 渲染
ReactDOM.render(<RandomNumber/>, document.getElementById('root'));

純粋な成分

役割と使用

純粋な成分：React.ComponentとPureComponent同様の機能
差：内部PureComponent自動的shouldComponentUpdateフック、手動で比較する必要なし

原理：それぞれ純粋な値の内部部品、前二小道具および状態後の比較によっては、にコンポーネントを再描画するかどうかを決定します

// 生成随机数
class RandomNumber extends React.PureComponent {
    state = {
        number: 0
    };
    btnHandlerClicked = () => {
        this.setState((state, props) => {
            return {
                number: Math.ceil(Math.random() * 3)
            }
        })
    };

    render() {
        console.log('render -- ');
        return (
            <div>
                <h2>随机数: {this.state.number}</h2>
                <button onClick={this.btnHandlerClicked}>clickedMe create random number</button>
            </div>
        )
    }
}

// 渲染
ReactDOM.render(<RandomNumber sendnumber={1234}/>, document.getElementById('root'));

原則

説明：比較純粋な成分が浅い比較される内部（浅の比較）
値型のためのものである：比較二つの値が同一であります
リファレンスタイプ：オブジェクトへの参照のみが同じアドレスである以上
注：状態や小道具属性値が参照型である場合には、新しいデータを作成する必要があり、不要直接修改原数据

// 正确做法：创建新对象
const newObj = { ...this.state.obj, number: Math.floor(Math.random() * 3) }
this.setState(() => {
    return {
        obj: newObj
    }
})

// 错误演示：直接修改原始对象中属性的值
const newObj = this.state.obj；
newObj.number = Math.floor(Math.random() * 3)

this.setState(() => {
    return {
        obj: newObj
    }
})

SETSTATE | | JSX構文変換|コンポーネントのアップデートメカニズム[] 100分の6原則に反応リアクト

コンポーネントのアップデートメカニズム

コンポーネントのパフォーマンスの最適化

状態を削減

不要な再レンダリングを避けます

純粋な成分

役割と使用

原則

おすすめ