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 3308 最长连续上升区间
LCIS Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- Codeforces Round#409/VK-Cup 2017 Round2
来自FallDream的博客,未经允许,请勿转载,谢谢. 和ditoly组队打VK-Cup,起了个名字叫Vegetable Chicken(意思显然),然后昨天我做AB他切C 很不幸的是.....我写 ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- Unique-paths （动态规划）
题目描述 A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below) ...
- IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
IE6不支持min-height,解决办法使用css hack: .target { min-height: 100px; height: auto !important; height: 100px ...
- 基于pytorch实现HighWay Networks之Highway Networks详解
(一)简述---承接上文---基于pytorch实现HighWay Networks之Train Deep Networks 上文已经介绍过Highway Netwotrks提出的目的就是解决深层神经 ...
- linux安装mysql数据库
安装mysql 1.下载MySQL的安装文件 安装MySQL需要下面两个文件: MySQL-server-4.0.23-0.i386.rpm MySQL-client-4.0.23-0.i386.rp ...
- Python小代码_12_生成前 n 行杨辉三角
def demo(t): print([1]) print([1, 1]) line = [1, 1] for i in range(2, t): r = [] for j in range(0, l ...
- java 需要准备的知识(转摘)
需要准备的知识 以下为在近期面试中比较有印象的问题,也就不分公司了,因为没什么意义,大致分类记录一下,目前只想起这么多,不过一定要知道这些问题只是冰山一角,就算都会了也不能怎么样,最最重要的,还是坚实 ...
- .net环境下跨进程、高频率读写数据
一.需求背景 1.最近项目要求高频次地读写数据,数据量也不是很大,多表总共加起来在百万条上下. 单表最大的也在25万左右,历史数据表因为不涉及所以不用考虑, 难点在于这个规模的热点数据,变化非常频繁. ...