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 = React.createClass({
        getInitialState: function () {
            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>, document.body);
</script>

查看代码

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

<script type="text/babel">
    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 () {
            //可以使用下面替换
            //<HelloWorld name1='Tim' name2 = 'John'></HelloWorld>
            return <div>
                <HelloWorld {...this.state}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange} />
                </div>
        },
    });
    ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>, document.body);
</script>

查看代码

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

查看代码

状态的含义和用法

state

状态：事物所处的状况

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

setState：更新组件状态

<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            return <p>Hello, {this.props.name}</p>;
        },
    });
    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {
                name: 'Tim',
            };
        },
        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><HelloUniverse></HelloUniverse></div>, document.body);
</script>

属性和状态对比

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

相同点：

都是纯JS对象

都会触发render更新

都具有确定性

比较

区分的方法：

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

属性和状态实战

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

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>文章评论框</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var Content = React.createClass({
                getInitialState: function () {
                    return {
                        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 (event) {
                    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]} key={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);
        </script>
    </body>
</html>

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

查看代码

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 = React.createClass({
        getInitialState: function () {
            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>, document.body);
</script>

查看代码

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

<script type="text/babel">
    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 () {
            //可以使用下面替换
            //<HelloWorld name1='Tim' name2 = 'John'></HelloWorld>
            return <div>
                <HelloWorld {...this.state}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange} />
                </div>
        },
    });
    ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>, document.body);
</script>

查看代码

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

查看代码

状态的含义和用法

state

状态：事物所处的状况

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

setState：更新组件状态

<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            return <p>Hello, {this.props.name}</p>;
        },
    });
    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {
                name: 'Tim',
            };
        },
        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><HelloUniverse></HelloUniverse></div>, document.body);
</script>

属性和状态对比

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

相同点：

都是纯JS对象

都会触发render更新

都具有确定性

比较

区分的方法：

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

属性和状态实战

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

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>文章评论框</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var Content = React.createClass({
                getInitialState: function () {
                    return {
                        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 (event) {
                    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]} key={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);
        </script>
    </body>
</html>

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

查看代码

4. React 属性和状态介绍的更多相关文章

react 属性与状态学习笔记
知识点:1.react 属性的调用 this.props.被调用的属性名设置属性的常用方法:var props = { one: '123', two: 321}调用这个属性:<HelloWo ...
react.js 从零开始（四）React 属性和状态详解
属性的含义和用法: 1.属性的含义. props=properties 属性:一个事物的性质和关系. 属性往往与生俱来,不可以修改. 2. 属性的用法. <Helloworld name=??? ...
React 属性和状态具体解释
属性的含义和使用方法 props=properties 属性:一个事物的性质与关系属性往往是与生俱来的.无法自己改变的. 属性的使用方法: 第一种方法:键值对 1.传入一个字符串:"Hi& ...
React 属性和状态的一些总结
一.属性 1.第一种使用方法:键值对 <ClaaNameA name = “Tom” /> <ClaaNameA name = {Tom} /> <ClaaNameA n ...
React属性和状态对比
一.相似点二.区别三.如何区分 PS:所有的数据都可以变成属性
React基础（Diff算法，属性和状态）
1.React的背景原理 (1)React Diff算法流程 (2)React虚拟DOM机制 React引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DO ...
winFrom 常用控件属性及方法介绍
目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichTextBox控件 5.NumericUpDown控件 6.Button(按钮)控件 7.Gro ...
C# 常用控件属性及方法介绍
C#常用控件属性及方法介绍目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox ...
【React】377- 实现 React 中的状态自动保存
点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

随机推荐

hdu 5392
Sample Input 2 3 1 3 2 6 2 3 4 5 6 1 Sample Output 2 6 题意:给一个转置求它的循环长度题解:分解成循环求最小公倍数 #include< ...
【LA 3027 Corporative Network】
·一些很可爱的询问和修改,放松地去用并查集解决. ·英文题,述大意: 输入n(5<=n<=20000)表示树有n个节点,并且会EOF结束地读入不超过 20000个操作,一共有两种: ...
[BZOJ]1042 硬币购物(HAOI2008)
失踪OJ回归. 小C通过这道题mark一下容斥一类的问题. Description 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬币,买s ...
bzoj3786星系探索 splay
3786: 星系探索 Time Limit: 40 Sec Memory Limit: 256 MBSubmit: 1314 Solved: 425[Submit][Status][Discuss ...
BZOJ3065(替罪羊树套线段树)
以前看到这题都瑟瑟发抖,终于过了心情舒畅. 按下标为关键字建替罪羊树,每个结点开一个权值线段树,维护的这个结点代表的子树的信息. 这题还得垃圾回收,自己yy的,不知对不对.. #include < ...
glusterfs 4.0.1 event模块分析笔记1
1. 前言在C语言i中,存储变量的结构体加上一组函数指针,大概就可以算是一个对象模型了:如果将一组函数指针捆绑为结构体, 后期根据配置或者环境需要绑定到不同实现模块中的一组函数,可以认为是C语言面对 ...
关于一些基础的Java问题的解答（五）
21. 实现多线程的两种方法:Thread与Runable 在Java中实现多线程编程有以下几个方法: 1.继承Thread类,重写run方法 public class Test { public s ...
Docker常见仓库MySQL
MySQL 基本信息 MySQL 是开源的关系数据库实现. 该仓库提供了 MySQL 各个版本的镜像,包括 5.6 系列.5.7 系列等. 使用方法默认会在 3306 端口启动数据库. $ sudo ...
Dynamics 365 Web Api之基于single-valued navigation property的filter查询
本篇要讲的是dynamics 新版本中web api的一个改进功能,虽然改进的很有限,但至少是改进了. 举个例子,我们现在知道联系人的名字vic,我们想找出客户记录中主要联系人名字为vic的所有客户, ...
Swift基础之实现选择图片时，出现类似于ActionSheet的样式
之前看到过有APP在选择图片时,调用手机相册时,将手机相册做成了左右滑动选择的效果,这次展示的就是这种样式,用OC语言已经有人实现过类似的代码,在这里写的仅仅是效果展示的代码调用,具体代码,可以自己研 ...

4. React 属性和状态介绍

属性的含义和用法

状态的含义和用法

属性和状态对比

状态的含义和用法

4. React 属性和状态介绍的更多相关文章

随机推荐

热门专题