[React]プロパティとステータス

属性と意味と使い方(props)

3つの付与方法

1.

   var style = {
        color: "red",
        border: "1px solid #000",
    };

    var HelloWorld = React.createClass({
        render: function () {
            return 
Hello, {this.props.name ? this.props.name : "World"}
;
        }
    });


    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {name: ''};
        },
        handleChange: function (event) {
            this.setState({name: event.target.value});
        },
        render: function () {
            return 

                this.state.name}>
                

                "text" onChange={this.handleChange}/>
            
        }
    });
    ReactDOM.render(
            

        , document.body)

2.

    var style = {
        color: "red",
        border: "1px solid #000",
    };

    var HelloWorld = React.createClass({
        render: function () {
            return 
Hello, {this.props.name1 + ' ' + this.props.name2}
;
        }
    });


    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {
                name1: 'Tim',
                name2: 'John'
            };
        },
        handleChange: function (event) {
            this.setState({name1: event.target.value});
        },
        render: function () {
            return 

                this.state}>
                

                "text" onChange={this.handleChange}/>
            
        }
    });
    ReactDOM.render(
            

        , document.body)

3.setProps形式:コンポーネントによって属性を更新し、コンポーネント内部で属性を変更することはできません.コンポーネント設計の原則に反するため(できるだけ避ける)

    var HelloWorld = React.createClass({
        render: function(){
            return 
Hello, {this.props.name}
        }
    });
    var instance = ReactDOM.render(, document.body);
    instance.setProps({name: 'wilcohuang'});

状態の意味と使い方(state)

getInitialState:各インスタンス固有の和居状態

を初期化する.

setState:コンポーネントステータスの更新、setState->diffアルゴリズム->変更がある場合->DOM

の更新

属性とステータスの比較

同じ点:

はすべて純JSオブジェクト

です

はrender更新

をトリガーします.

はいずれも確定性

を有する
-
ツールバーの
≪ステータス｜Status｜emdw≫
親コンポーネントから初期値を取得できますか?
yes
no
親コンポーネントで変更できるかどうか
yes
no
コンポーネントの内部にデフォルト値を設定できますか?
yes
yes
コンポーネント内で変更可能
no
yes
サブアセンブリの初期値を設定できますか?
yes
no
サブアセンブリの値を変更できますか?
yes
no
コンポーネントが実行中に変更する必要があるデータはステータスになります.

属性と状態実戦

プロジェクトを構成するコンポーネントを分析する

分析コンポーネントの関係及びデータ伝達

実際の記述コード

var Content = React.createClass({
        render: function () {
            return 
{this.props.selectName}
;
        },
    });
    var Comment = React.createClass({
        getInitialState: function () {
            return {
                names: ['Tim', 'John', 'Hank'],
                selectName: '',
            };
        },
        handleSelect: function () {
            this.setState({selectName: event.target.value});
        },
        render: function () {
            var options = [];
            for (var option in this.state.names) {
                options.push(this.state.names[option]}>{this.state.names[option]});
            }
            return 

                this.handleSelect}>
                    {options}
                
                this.state.selectName}>
            
;
        },
    });
    ReactDOM.render(, document.body);

    var Content = React.createClass({
        getInitialState: function () {
            return {
//                text: "reply To: " + this.props.selectName,    // ，getInitialState ， selectName ， 
                inputText: "",
            };
        },
        handleChange: function (event) {
            this.setState({inputText: event.target.value});
        },
        handleSubmit: function () {
            console.log('reply to ' + this.props.selectName + "
" + this.state.inputText);
        },
        render: function () {
            return 

                this.handleChange} placeholder=<span class="hljs-string">"please enter something..."</span>>
                this.handleSubmit}>submit
            
;
        },
    });
    var Comment = React.createClass({
        getInitialState: function () {
            return {
                names: ['Tim', 'John', 'Hank'],
                selectName: '',
            };
        },
        handleSelect: function () {
            this.setState({selectName: event.target.value});
        },
        render: function () {
            var options = [];
            for (var option in this.state.names) {
                options.push(this.state.names[option]}>{this.state.names[option]});
            }
            return 

                this.handleSelect}>
                    {options}
                
                this.state.selectName}>
            
;
        },
    });
    ReactDOM.render(, document.body);