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 5112 （2014北京水）
题意:有个人在跑步,一直每个时间他所在的位置,求最大速度 #include <iostream> #include <cstring> #include <cstdio& ...
ubuntu14.0464位 Ros环境安装halcon13.01
至于ROS的系统,之前就是安装好的,如果有疑问的可以参考官网的安装教程,按照指令一步一步的操作,http://wiki.ros.org/cn/indigo/Installation/Ubuntu (1 ...
DeepMoji:机器学习模型分析情绪, 情感
DeepMoji 是一个模型,接受12亿个带有表情的推文,以了解语言如何表达情绪. 通过转移学习,该模型可以在许多情感相关的文本建模任务上获得最先进的表现. 在 http://deepmoji.mit ...
自然语言处理工具：中文 word2vec 开源项目，教程，数据集
word2vec word2vec/glove/swivel binary file on chinese corpus word2vec: https://code.google.com/p/wor ...
dataview findrows
DataView dvStu = dsStu.Tables[0].Copy().DefaultView;//当前学年学期下所有学生 dvStu.Sort = "bjmc,xm"; ...
微信小程序开发导入文件说没找到.json的问题
这个真的坑爹网上的答案也没几个靠谱说白了就是找个空文件直接创建然后复制粘贴反应了这玩意ide不成熟进去之后直接创了个quick start的源码也就是我们看的这个网页建议我们下载的源码老 ...
JNI 方法注册与签名+BufferedReader使用readLine问题
最近了解了关于JavaJNI接口的一些关于方法注册与签名相关的知识,在此进行一下总结. 使用JNI接口时,我们首先需要把Java方法声明为native: public native void f(); ...
php中AJAX请求中使用post和get请求的区别
之前使用这两个请求的时候,主要从几个方面考虑: 1.语义,get就是从服务器获取,一般就是获取/查询资源信息.post就是提交给服务器,一般就是更新资源信息. 2.请求文件大小,get一般只有2k这样 ...
阿里云部署mongdb（CentOS）
配置包管理系统 (yum). Xshell登录Linux查看操作系统版本信息 lsb release -a 可以在官网选择对应的版本 :官网的安装指导文档http://docs.mongodb.org ...
嫌我的键盘的backspace太小，就尝试了一下改键工具--keyTweak
KeyTweak是一个很简单的键盘remap小工具,主要功能就是可以让我们选择某个按键并重新赋予该按键一个新的功能.如果哪天你的键盘某个重要的键坏掉了,可以通过这个免费的软件来重新定义该按键的功能.譬 ...

4. React 属性和状态介绍

属性的含义和用法

状态的含义和用法

属性和状态对比

状态的含义和用法

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

随机推荐

热门专题