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 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...
随机推荐
- [bzoj4822][Cqoi2017]老C的任务&[bzoj1935][Shoi2007]Tree 园丁的烦恼
来自FallDream的博客,未经允许,请勿转载,谢谢. 老 C 是个程序员. 最近老 C 从老板那里接到了一个任务——给城市中的手机基站写个管理系统.作为经验丰富的程序员,老 C 轻松地完成 ...
- HTML的基本介绍
HTML(HyperText Markup Language): 超文本标记语言,超文本就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. HTML是标记语言!!!!! HTML是标记语言! ...
- Springboot整合log4j2【详细步骤】
1.去除logback中的依赖包 <dependency> <groupId>org.springframework.boot</groupId> <arti ...
- JavaBean toString方式
package object; import java.util.Date; public class ReportDataQo implements java.io.Serializable { p ...
- HTTP 协议详解(超级经典)-转
什么是HTTP协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端 ...
- java.lang.UnsatisfiedLinkError: D:\Tomcat\apache-tomcat-7.0.67\bin\tcnative-1.dll:
Can't load IA 32-bit .dll on a AMD 64-bit platform 错误原因 由错误提示可知,tcnative-1.dll是一个32位文件,但是运行在64位系统上 解 ...
- 装 ubuntu + win10 出现 grub rescue 并处理之
开机出现 grub rescue 原因:装 ubuntu + win10 双系统时有可能搞坏启动文件. grub rescue 隶属于 ubuntu管理. grub rescue 里可用命令很少,主要 ...
- iOS支付宝，微信，银联支付集成封装（上）
一.集成支付宝支付 支付宝集成官方教程https://docs.open.alipay.com/204/105295/ 支付宝集成官方demo https://docs.open.alipay.com ...
- let 和 const 命令
let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a / ...
- iOS关于时间的处理
转自:iOS关于时间的处理 做App避免不了要和时间打交道,关于时间的处理,里面有不少门道,远不是一行API调用,获取当前系统时间这么简单.我们需要了解与时间相关的各种API之间的差别,再因场景而异去 ...