【05】react 之 组件state
1.1. 状态理解
React的数据流：由父节点传递到子节点（由外到内传递），如果顶层组件某个prop改变了，React会向下传递，重新渲染所有使用过该属性的组件。除此之外React 组件内部还具有自己的状态，这些状态只能在组件内部修改。通过与用户的交互（点击），实现不同状态（显示、隐藏、数量增加...），然后渲染UI，让用户界面和数据保持一致。React中只需更新组件的state，然后根据新的 state 重新渲染用户界面。
this.props 属性:由父节点传入到组件内部，只读，不可修改。
this.state 状态:由组件自己创建，可以修改，一般由用户交互产生新的状态(数据)。
1.2. 状态案例
开发一个开关组件，组件有两种状态，开、关。修改状态方式，通过this.setState({}),请勿使用this.state.
<!DOCTYPE html>
<html>
<head>
<script src="../build/react-0.14.0.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
class MySwitch extends React.Component{
constructor(props){
super(props);
this.state = {
isEdit:false //false :关闭 true:打开
};
this.handleClick = this.handleClick.bind(this);
}
render(){
return (<button onClick={this.handleClick}>{this.state.isEdit?'关闭':'打开'}</button>)
} handleClick(e){
this.setState({
isEdit:!this.state.isEdit
});
}
}
ReactDOM.render(<MySwitch/>,document.getElementById('example'))
</script>
</body>
</html>
1.3. state与props区别
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。
1.4state注意事项
上面已经说明了setState的基本使用。但是 setState 不会立即改变 this.state ，而是挂起状态转换，调用 setState 方法后立即访问 this.state 可能得到的是旧的值。如下面的例子：
setState 方法不会阻塞state更新完毕
第二个 setState 可能还没等待第一次的state更新完毕就开始执行了，所以最后count可能只加了1。
this.setState({
count: this.state.count + 1
});
this.setState({
count: this.state.count + 1
});
setState方法还有第二个参数，相当于回调函数：
this.setState({
count: this.state.count + 1
}, () => {
this.setState({
count: this.state.count + 1
});
});
不过看起来很怪， es6 中可以使用 Promise 更优雅的使用这个函数，封装一下 setState
function setStateAsync(nextState){
return new Promise(resolve => {
this.setState(nextState, resolve);
});
}
上面的例子就可以这样写
async func() {
...
await this.setStateAsync({count: this.state.count + 1});
await this.setStateAsync({count: this.state.count + 1});
}
顺眼多了。
函数方式
nextState 也可以是一个 function ，称为状态计算函数，结构为 function(state, props) => newState 。这个函数会将每次更新 加入队列 中，执行时通过当前的 state 和 props 来获取新的 state 。那么上面的例子就可以这样写
this.setState((state, props) => {
return {count: state.count + 1};
});
this.setState((state, props) => {
return {count: state.count + 1};
});
每次更新时都会提取出当前的state，进行运算得到新的state，就保证了数据的同步更新。
控制渲染
默认调用 setState 都会重新渲染视图，但是通过 shouldComponentUpdate() 函数返回 false来避免重新渲染。
如果可变对象无法在 shouldComponentUpdate() 函数中实现条件渲染，则需要控制 newState与 prevState 不同时才调用 setState 来避免不必要的重新渲染。
【05】react 之 组件state的更多相关文章
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- 初识React,Virutal DOM, State以及生命周期
这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...
- reactjs入门到实战（七）---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- react 编写组件 五
看以下示例了解如何定义一个组件 // 定义一个组件LikeButton var LikeButton = React.createClass({ // 给state定义初始值 getInitialSt ...
- React入门---属性(state)-7
state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
随机推荐
- 已解决: mybatis报错 org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'xxx' in 'class java.lang.String'
最近在练习MyBatis时 进行姓名的模糊查询时候出现 org.apache.ibatis.exceptions.PersistenceException: ### Error querying da ...
- 洛谷P3371单源最短路径Dijkstra版（链式前向星处理）
首先讲解一下链式前向星是什么.简单的来说就是用一个数组(用结构体来表示多个量)来存一张图,每一条边的出结点的编号都指向这条边同一出结点的另一个编号(怎么这么的绕) 如下面的程序就是存链式前向星.(不用 ...
- MySQL - GROUP_CONCAT 使用方法
如上图,我想把结果集中的三行链接成一行,则可这样写: 总结: GROUP_CONCAT函数默认是用','逗号链接,如果你加上第二个参数,则以',第二个参数值'逗号+第二个参数值链接,如下图 ...
- linux下vim命令
进入vim的命令 vim filename :打开或新建文件,并将光标置于第一行首 vim +n filename :打开文件,并将光标置于第n行首 vim + filename :打开文件,并将光标 ...
- DDOS与DOS的区别
0x01 在说之前,先看一些例子吧 还有众所周知的中美黑客大战,新闻我就不说了 0x02 什么是DOS DoS是Denial of Service的简称,即拒绝服务,造成DoS的攻击行为被称为DoS攻 ...
- mysql面试题：字段中@之前字符相同且大于等于2条的所有记录
公司发了一张面试题给我,题目如下: 在test数据库中有个flow_user表,找出email字段中@之前字符相同且大于等于2条的所有记录 答案: select substring_index(`em ...
- Java中的接口和抽象类（转）
在面向对象的概念中,我们知道所有的对象都是通过类来描述的,但是并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类往往用来表征我们在对问题 ...
- 04vim的使用
linux常用命令 workon 查看已经安装的虚拟环境 deactivate 退出虚拟环境 whoami 查看用户 sudo bash install.sh 添加权限 pwd 查看在那个路径下 cd ...
- django处理上传文件配置
1.sttings中配置 'django.template.context_processors.media' TEMPLATES = [ { 'BACKEND': 'django.template. ...
- [Bzoj2588]Count on a tree（主席树+LCA）
Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...