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 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...
随机推荐
- HDU 4526 拼车记
话说威威猫有一次去参加比赛,虽然学校离比赛地点不太远,但威威猫还是想坐出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人坐车去,还是一堆人一起,总共需要支付的钱是一样的(每辆出租 ...
- hdu 4630 查询[L,R]区间内任意两个数的最大公约数
No Pain No Game Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- bzoj3597[Scoi2014]方伯伯运椰子 01分数规划+spfa判负环
3597: [Scoi2014]方伯伯运椰子 Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 594 Solved: 360[Submit][Statu ...
- UVA 3713 Astronauts
The Bandulu Space Agency (BSA) has plans for the following three space missions: • Mission A: Landin ...
- [ 学习笔记 ] Hibernate框架学习之一
一.JavaEE开发三层结构和三大框架的对应关系: Struts2框架 -> 表现层 web层(MVC是表现层的设计模型) 业务层 service层 Hibernate框架 -> 持久层 ...
- OVF文件考究
一.什么是OVF文件 开源虚拟化格式OVF(不同于小写的ovf)文件是一种开源的文件规范,它描述了一个开源.安全.有效.可拓展的便携式虚拟打包以及软件分布格式,它一般有几个部分组成,分别是o ...
- java反射 概念
一.什么是反射机制 简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字, 那么就可以通过反射机制来获得类的所有信息. 二.哪里用到反射机制 ...
- gravity和layout_gravity的区别
一.gravity和layout_gravity相同处 两者都是设置对齐方式的属性.内部的属性值相同. 根据英文意思也能理解其中的意思.如center_horizontal表示在水平方向上的位置为中间 ...
- range和xrange的区别详解
两种用法介绍如下:1.range([start], stop[, step])返回等差数列.构建等差数列,起点是start,终点是stop,但不包含stop,公差是step.start和step是可选 ...
- Linux下查看进程打开的文件句柄数
---查看系统默认的最大文件句柄数,系统默认是1024 # ulimit -n ----查看当前进程打开了多少句柄数 # lsof -n|awk '{print $2}'|sort|uniq -c|s ...