Reactにおける状態の使い方を詳しく解説

今回はReactにおけるstateの使い方と、Reactでstateを使う際の注意点について詳しく解説します。実際の事例を見てみましょう。

state

state は props として理解できます。違いは、props が読み取り専用であるのに対し、state は読み取りおよび書き込み可能であることです。状態が変化すると、レンダリング メソッドが再実行されて DOM ツリー全体がレンダリングされ、レンダリング プロセス中にどの DOM が更新されたかを計算するために使用され、パフォーマンスが向上します。 状態を使用する前に、まず getInitialState を初期化する必要があります 状態を変更するには、setState を使用する必要があります
getInitialState このメソッドは毎回 1 回呼び出されますレンダリングします。 getInitialState
更改 state 一定要用 setState
getInitialState

//es5
var StateComponent = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    change: function(event){
        this.setState({text: event.target.value});
    },
    render: function(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}) 
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    state = {
        text: ''
    }
    change(event){
        this.setState({text: event.target.value});
    },
    render(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

react で選択された li を強調表示する手順の詳細な説明

JS での JSON および Math ユースケース分析

以上がReactにおける状態の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。