[React]属性和状态

来源：互联网发布：程序员团队贡献编辑：程序博客网时间：2024/06/05 20:15

属性和含义和用法(props)

三种赋值方法

   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)

    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

组件在运行时需要修改的数据就要状态。

属性和状态实战

分析构成项目的组件
分析组件的关系及数据传递
实际编写代码

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);

阅读全文

0 0