4. React 属性和状态介绍

发布时间：2020-12-15 08:22:47 所属栏目：百科来源：网络整理

导读：React 中的属性和状态初看之下可以互相替代，但是在 React 的设计哲学中两者有着截然不同的使用方式和使用场景。属性的含义和用法 props = properties 属性往往是与生俱来、无法自己改变的第一种使用方式：{this.state.name} script type= "text/babel" va

React 中的属性和状态初看之下可以互相替代，但是在 React 的设计哲学中两者有着截然不同的使用方式和使用场景。

属性的含义和用法

props = properties

属性往往是与生俱来、无法自己改变的

第一种使用方式：{this.state.name}

<script type="text/babel">
 var HelloWorld = React.createClass({
        render: function () {
 return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
        }    }) var HelloUniverse = createClass({
        getInitialState:  return {name: ''}        handleChange: function (event) {
 this.setState({name: event.target.value})        render: function () {
            //还有如下的方式设置属性
            // <HelloWorld name="字符串"></HelloWorld>
            //{}js的表达式
            //<HelloWorld name={}></HelloWorld>
数组{[1,2,3]}
 return <div>
                <HelloWorld name={this.state.name}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange} />
                </div>
        }    ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>body);
</script>

查看代码

第二种：{...this.state}

this.props.name1 + ' ' + name2}</ return {
                name1: 'Tim'                name2: 'John'            }name1: event.可以使用下面替换
            //<HelloWorld name1='Tim' name2 = 'John'></HelloWorld>
 return <div>
                <HelloWorld {...this.state}></HelloWorld>
                <br/>
                <</script>

查看代码

第三种：setProps 几乎不使用新版本已移除

查看代码

状态的含义和用法

state

状态：事物所处的状况

getInitialState：初始化每个实例特有的状态

setState：更新组件状态

this.props.name}</                name: </script>

属性和状态对比

属性和状态作为组件之间数据流动的途径，非常容易混用，下面对属性和状态进行对比，介绍两者的相同点、不同点以及使用方法。

相同点：

都是纯JS对象

都会触发render更新

都具有确定性

比较

区分的方法：

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

属性和状态实战

下面通过一个例子来介绍属性和状态的正确用法。如果错误使用属性和状态会增加代码的维护难度和组件的逻辑复杂度。

<!DOCTYPE html<html lang="zh-cn"    <head>
        <meta charset="UTF-8"        <title>文章评论框</title>
        <script src="../build/react.js"></script>
"../build/react-dom.js""../build/browser.min.js"    </head>
    <body>
 var Content =                 getInitialState:                         inputText: ""                    }                }                handleChange: inputText: event.                handleSubmit: function () {
                    console.log("reply To: " + selectName + "n" + state.inputText)                render:  return <div>
                        <textarea this.handleChange} placeholder="please enter something..."></textarea>
                                <button onClick={this.handleSubmit}>submit</button>
                        </div>            }) var Comment =                         names: ["Tim""John""Hank"]                        selectName: ''                handleSelect: selectName: event. var options = [] for (var option in this.names) {
                        options.push(<option value={this.state.names[option]} key={this.state.names[option]}>{names[option]}</option>)
                    } return <div>
                        <select this.handleSelect}>
                        {options}
                        </select>
                        <Content selectName={this.state.selectName}></Content>
                        </div>            ReactDOM.render(<Comment></Comment>        </script>
    </body>
</html>

选择默认进行文章的发送，观察F12调试模式下的情况

查看代码

React 中的属性和状态初看之下可以互相替代，但是在 React 的设计哲学中两者有着截然不同的使用方式和使用场景。

属性的含义和用法

props = properties

属性往往是与生俱来、无法自己改变的

第一种使用方式：{this.state.name}

</script>

查看代码

第二种：{...this.state}

</script>

查看代码

第三种：setProps 几乎不使用新版本已移除

查看代码

状态的含义和用法

state

状态：事物所处的状况

getInitialState：初始化每个实例特有的状态

setState：更新组件状态

</script>

属性和状态对比

属性和状态作为组件之间数据流动的途径，非常容易混用，下面对属性和状态进行对比，介绍两者的相同点、不同点以及使用方法。

相同点：

都是纯JS对象

都会触发render更新

都具有确定性

比较

区分的方法：

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

属性和状态实战

下面通过一个例子来介绍属性和状态的正确用法。如果错误使用属性和状态会增加代码的维护难度和组件的逻辑复杂度。

</html>

选择默认进行文章的发送，观察F12调试模式下的情况

查看代码

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!