屬性和含義和用法(props)

三種賦值方法

1.

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

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


    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {name: ''};
        },
        handleChange: function (event) {
            this.setState({name: event.target.value});
        },
        render: function () {
            return <div>
                <HelloWorld name={this.state.name}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange}/>
            </div>
        }
    });
    ReactDOM.render(
            <div style={style}><HelloUniverse></HelloUniverse></div>
        , document.body)

2.

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

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


    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {
                name1: 'Tim',
                name2: 'John'
            };
        },
        handleChange: function (event) {
            this.setState({name1: event.target.value});
        },
        render: function () {
            return <div>
                <HelloWorld {...this.state}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange}/>
            </div>
        }
    });
    ReactDOM.render(
            <div style={style}><HelloUniverse></HelloUniverse></div>
        , document.body)

3.setProps形式：通過元件更新屬性，不能在元件內部中修改屬性的，因為會違背元件設計原則（儘量避免）

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

狀態的含義和用法(state)

• getInitialState: 初始化每個例項特有和居狀態
• setState: 更新元件狀態，setState->diff演算法->(如果有變化)->更新DOM

屬性和狀態對比

相同點：

• 都是純JS物件
• 都會觸發render更新
• 都具有確定性

-	屬性	狀態
能否從父元件獲取初始值	yes	no
能否由父元件修改	yes	no
能否在元件內部設定預設值	yes	yes
能否在元件內部修改	no	yes
能否設定子元件的初始值	yes	no
能否修改子元件的值	yes	no

元件在執行時需要修改的資料就要狀態。

屬性和狀態實戰

1. 分析構成專案的元件
2. 分析元件的關係及資料傳遞
3. 實際編寫程式碼

var Content = React.createClass({
        render: function () {
            return <p>{this.props.selectName}</p>;
        },
    });
    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(<option value={this.state.names[option]}>{this.state.names[option]}</option>);
            }
            return <div>
                <select onChange={this.handleSelect}>
                    {options}
                </select>
                <Content selectName={this.state.selectName}></Content>
            </div>;
        },
    });
    ReactDOM.render(<Comment></Comment>, 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 + "\n" + this.state.inputText);
        },
        render: function () {
            return <div>
                <textarea onChange={this.handleChange} placeholder="please enter something..."></textarea>
                <button onClick={this.handleSubmit}>submit</button>
            </div>;
        },
    });
    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(<option value={this.state.names[option]}>{this.state.names[option]}</option>);
            }
            return <div>
                <select onChange={this.handleSelect}>
                    {options}
                </select>
                <Content selectName={this.state.selectName}></Content>
            </div>;
        },
    });
    ReactDOM.render(<Comment></Comment>, document.body);