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 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

随机推荐

APIO 2013
这套好丧--跟别的画风好不一样(中国风?).提答没做也没测,假装只有两题吧.140/200 T1.ROBOTS 题目大意:h*w的网格上有n个机器人编号1~n,网格上有空地.墙.顺/逆时针转向器,每次 ...
SpringBoot学习之集成dubbo
一.摘自官网的一段描述 1.背景随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 ...
浙大patB习题的一点总结
嘛嘛,patB的习题已经结束了,这些基本上没有啥特别难的,但还是有几道特别坑爹的题(o(╯□╰)o),还是把这些题的代码打包上传吧.
H3C系列之三层交换机系统版本升级
本文涉及到的硬件与软件交换机:H3C S3600-28TP-SItftp软件:tftpd32小软件升级的文件:S36SI_E-CMW310-R1702P44.zip 关于升级的文件说明如下: S36S ...
js数组求差集
var arr1 = [2,3,5,88,99,444,66];var arr2 = [2,88,66]; arr_dive(arr1,arr2); function arr_dive(aArr,bA ...
关于一些基础的Java问题的解答（七）
31. 反射的作用与原理简单的来说,反射机制其实就是指程序在运行的时候能够获取自身的信息.如果知道一个类的名称或者它的一个实例对象, 就能把这个类的所有方法和变量的信息(方法名,变量名,方法,修饰符 ...
git提交项目常用命令及git分支的用法
1.第一步首先从git托管平台clone项目,我这里就使用idea为例: 填写git的url与存放本地目录名及项目名 2.如果你对项目进行了一些修改,就可以执行git命令,进行提交. 有两种方 ...
Spring消息之AMQP.
一.AMQP 概述 AMQP(Advanced Message Queuing Protocol),高级消息队列协议. 简单回忆一下JMS的消息模型,可能会有助于理解AMQP的消息模型.在JMS中,有 ...
delphi 面向对象实用技能教学一(递归)
本例使用类与TList相结合,用简洁的方法,实现了一个 HTML 解析与格式化功能.所用到的知识点如下:1.类的提前申明2.TList用法3.String的指针操作4.单例设计5.递归用法编程是综合 ...
Splay伸展树入门(单点操作，区间维护)附例题模板
Pps:终于学会了伸展树的区间操作,做一个完整的总结,总结一下自己的伸展树的单点操作和区间维护,顺便给未来的自己总结复习用. splay是一种平衡树,[平均]操作复杂度O(nlogn).首先平衡树先是 ...

4. React 属性和状态介绍

属性的含义和用法

状态的含义和用法

属性和状态对比

状态的含义和用法

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

随机推荐

热门专题