4. React 属性和状态介绍
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>
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>
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 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...
随机推荐
- bzoj1132[POI2008]Tro 计算几何
1132: [POI2008]Tro Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 1722 Solved: 575[Submit][Status] ...
- 一则利用内核漏洞获取root权限的案例【转】
转自:https://blog.csdn.net/u014089131/article/details/73933649 目录(?)[-] 漏洞描述 漏洞的影响范围 漏洞曝光时间 漏洞产生的原因 漏洞 ...
- 《Java技术》第三次作业--面向对象——继承、抽象类、接口
1.阅读下面程序,分析是否能编译通过?如果不能,说明原因.应该如何修改?程序的运行结果是什么?为什么子类的构造方法在运行之前,必须调用父 类的构造方法?能不能反过来? class Grandparen ...
- .net如何引用System.Drawing.Drawing2D 命名空间和System.Drawing.Image及其相关概念
其实这个很简单,直接在引用那里单击右键选择添加框架,然后找到System.Drawing就OK了, 其实并没有网上所说的那样需要下载什么Drawing.BLL. 首先Syetem.Drawing.Dr ...
- PHP 中 config.m4 的探索
PHP 中 config.m4 的探索 最近在看php扩展相关的东西,虽然来来回回编辑了好多次config.m4,并且也在技术社区看到了 config.m4是什么?什么作用? 类的问题,但是还是觉得有 ...
- img图片占不满整个div
解决方法: img标签自带有3px的空隙,有很多解决方法第一种:设置img{font-size:0}第二种:设置img{display:block}第三种:设置img{vertical-align:t ...
- SVN冲突解决
问题一.执行SVN commit时候,会生成除正常文件之外.mine..r3439 ..r3368的三个文件 .mine:是自己要提交的版本 .r3439:在别人之前提交的版本 .r3368:初始版本 ...
- PostOffice最小距离问题
在一个按照东西和南北方向划分成规整街区的城市里,n个居民点散乱地分布在不同的街区中.用x 坐标表示东西向,用y坐标表示南北向.各居民点的位置可以由坐标(x,y)表示. 街区中任意2 点(x1,y1)和 ...
- Junit4 java.lang.Exception: No runnable methods
出现如下错误: java.lang.Exception: No runnable methods at org.junit.runners.BlockJUnit4ClassRunner.validat ...
- django模板语言中的extends，block和include
extends和block一起用 它们用于母版和子版的继承 在母版html中将一些需要替换的部分用{% block xxx %}...{% endblock %}括起来, 在子版html中,在第一行需 ...