this.setState的详细用法

1.为什么不要直接对state进行赋值？

如果直接对this.state复制是不会去更新视图的,this.setState的原理是同一个队列来实现state的更新的,将需要更新的state放入到状态队列中,在一定时间段之后,合并并更新state,然后进行渲染.而直接对this.state赋值是不会有这些操作的,因此不要对state进行直接赋值.

2.this.setState为什么是异步的?

this.setState的操作是异步的,是为了提升性能对state的更新进行批量操作,官方文档中的原话:

将 setState() 视为请求而不是立即更新组件的命令。为了更好的感知性能，React 会延迟调用它，然后通过一次传递更新多个组件。React 并不会保证 state 的变更会立即生效。

如果每一次的调用this.setState都去更新state和渲染组件,这对浏览器来说是一个很大开销。因此就需要这种批量操作以达到性能的提升。

3.如果this.setState是异步的，那么在使用当前状态去更新下个状态的时候，由于当前的state可能不是最新的，就会出现问题；那怎么解决？

class Welcome2 extends React.Component{constructor(props) {super(props);this.state={a:1};}componentDidMount() {console.log(this.state);//a:1this.setState({a:this.state.a+1});console.log(this.state);//a:1this.setState({b:this.state.a});console.log(this.state);//a:1}render() {return <h1>{this.state.a}</h1>}
}

this.setState的第一个参数是可以接受一个函数的，在这个函数中第一个参数是state，第二个参数是props，其中state一定是最新的。

class Welcome2 extends React.Component{constructor(props) {super(props);this.state={a:1};}componentDidMount() {console.log(this.state,"a");//a:1  athis.setState((state)=>({a:state.a+1}));console.log(this.state,"b");//a:1  bthis.setState((state)=>{console.log(this.state,state);//a:1  a:2 return {b:state.a}});console.log(this.state,"c");//a:1  c}render() {return <h1>{this.state.a} and {this.state.b}</h1>;//最终b也会被渲染到页面上}
}

4.在批量更新时，React 总会按照定义顺序进行浅合并。

this.setState({ a: 1 });
this.setState({ b: 2 });
this.setState({ c: 3, a: 'a' });//最终结果：  a:a  b:2  c:3

看一下的代码最终输入多少？

class Welcome3 extends React.Component{constructor(props) {super(props);this.state={a:1,count:0};}componentDidMount() {const incrementChange = state => ({ count: state.count + 1 })this.setState(incrementChange)   //1this.setState(incrementChange)   //2this.setState({ count: this.state.count + 1 })   //3this.setState(incrementChange)   //4}render() {return <h1>{this.state.count}</h1>}
}

最终在页面渲染的是2。由于第一步和第二部采用传入的函数的方式进行更新状态，所以在第二步之后count 的值就是2，在第三步中，由于并没有渲染，因此当前this.state.count是0，在进行浅合并之后，第三步执行完之后，count的值为1，第四步中就是将count赋值成1+1为2，因此输出是2。由此我们可以知道，无论第三步前执行了多少次setState，在第三步赋值的时候this.state.count都是0,浅合并之后count的值都会是1，输出的结果也都是2。

this.setState的详细用法相关推荐

C++中 cin 的详细用法
1.cin 简介 cin是C++编程语言中的标准输入流对象,即istream类的对象.cin主要用于从标准输入读取数据,这里的标准输入,指的是终端的键盘.此外,cout是流的对象,即ostream类的 ...
Android命令行工具logcat详细用法！
logcat是Android中一个命令行工具,可以用于得到程序的log信息. 见板凳详细说明! 本贴内容来自网络,引用网址为:http://hi.baidu.com/%C9%C1%D2%AB ...
__declspec关键字详细用法
__declspec关键字详细用法 2009-01-21 16:23 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与ext ...
mysql left/right join算法效率分析_mysql left join,right join,inner join超详细用法分析
MySQL left join,right join,inner join超详细用法分析下面是例子分析表A记录如下: aID aNum 1 a20050111 2 ...
python sort怎么用,Linux Sort命令详细用法（有实例）
Linux Sort命令详细用法(有实例) sort是在Linux里非常常用的一个命令,管排序的,集中精力,五分钟搞定sort,现在开始! Linux sort命令进阶: 1 sort的工作原理 so ...
vue性能优化-------vendor优化详细用法（瘦身），减小体积，引入cdn
vue性能优化-------vendor优化详细用法(瘦身),减小体积,引入cdn 原创ChrisWang_ 最后发布于2019-05-24 10:25:58 阅读数 1332 收藏展开 vue性 ...
oracle rtrim(),Oracle ltrim() rtrim() 函数详细用法
嘿嘿,今天在论坛里看了一篇帖子,讨论ltrim() 函数的详细用法,下面我借几个高手的回答总结一下: 先看几个实例: SQL> select ltrim('109224323','109') f ...
pythonrange函数用法_python range()函数详细用法
python range()函数详细用法函数原型:range(start, end, scan): 参数含义:start:计数从start开始.默认是从0开始.例如range(5)等价于range( ...
python中3 and not 5_python中not、and和or的优先级与详细用法介绍
前言 (小白专用)本次所分享的是Python中的not.and.or的执行时的优先级,以及他们的具体用法.本文比较详细,不喜勿喷. 一.not.and.or的含义以及优先级对象返回结果优先顺序 ...

this.setState的详细用法

this.setState的详细用法相关推荐

最新文章

热门文章