1.1

此处更新 setState ⚠️：异步更新数据。由于是异步的，紧跟其后去使用 this.state.count 还是默认值，并不是 setState 之后的值。

this.setState({// 1 + 1count: this.state.count + 1
})
console.log("count1", this.state.count) // 1

注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()
原因：因为 setState 是异步的，上面代码中可以看出，即使是 setState 执行了，
打印的还是 1，那么后面再执行 setState，相当于还是 1 + 1

this.setState({// 1 + 1count: this.state.count + 1
})
console.log("count1", this.state.count) // 1this.setState({// 1 + 1count: this.state.count + 1
})
console.log("count2", this.state.count) // 1

注意：当然，是可以多次调用 setState(),但只会触发一次重新渲染（render）
原因：为什么这么做呢？其实是为了性能的考虑，如果 setState 一次，就 render 一次，那么性能是很差的。所以，会把多次调用的 setState() 汇总合并，最后一次性的把结果渲染的页面上，只 render 一次。这样的性能会高很多。

1.2

上面的异步问题，如果依赖前面的 setState会出现异步问题那么，推荐使用

setState((state, props) => {})

参数state：表示最新的state
参数props：表示最新的props
注意：这种语法也是异步更新 state 的

this.setState((state, props) => {// 此时 state 是默认值return {// 1 + 1count: state.count + 1  // 2}
})

那么 setState((state, props) => {}) 与 this.setState({}) 有什么区别呢？
这个语法（setState((state, props) => {}) ）跟上面的语法（this.setState({}) ）的区别是参数是个回调函数，而回调函数中的参数 state 实际上表示的是最新的状态的。
什么意思呢？就是调用两次 setState() 的时候，第一次 state 是默认值，但第二次就不是默认值了，而是上一次 setState 之后的值

this.setState((state, props) => {// 此时 state 是默认值return {// 1 + 1count: state.count + 1  // 2}
})this.setState((state, props) => {// 这次 state 是拿到调用之后的结果console.log('第二次调用',state)// 此时 state 的值是上面 setState 之后的值return {// 2 + 1count: state.count + 1  // 3}
})

1.3

setState 第二个参数

在状态更新（页面完成重新渲染）后立即执行某个操作
setState(undater,[callback])

this.setState((state, props) => {return {// 1 + 1count: state.count + 1 // 2}
},() => {//状态更新后并且更新渲染后，立即执行console.log("状态更新完成：", this.state.count) // 2//console.log(document.getElementById("title").innerHTML)
})

以上具体内容可去 gitHub 看代码更清晰

setState 说明相关推荐

react控制组件的显示或隐藏，根据state判断元素显示隐藏 , setState不实时生效解决方法
代码实现功能:根据 state 中的值判断子组件显示或隐藏,因为 setState 不是及时生效的,所以不做显示隐藏判断会报错. render() {// 客户经理循环组件function Comme ...
react 之 setState
setState()是react为我提供的状态管理工具比如现在有下面的这样一段代码: class MyComponent extends React.Component { constructor( ...
React 项目----setState 方法修改 state （16）
在class 类中,构造器里面有一个实例变量state ,这个也是class 组件和function组件之间的区别.class 组件有自己的私有的数据 export default class Bin ...
关于react中setState的深入理解
在react中,通常通过state或props,来控制整个组件的状态.一旦state或props发生改变,整个组件会被重新渲染.在setState的理解上,可能会存在一些误区. setState的基本 ...
从一次react异步setState引发的思考
0. 前言一个异步请求,当请求返回的时候,拿到数据马上setState并把loading组件换掉,很常规的操作.但是,当那个需要setState的组件被卸载的时候(切换路由.卸载上一个状态组件)去s ...
setState 是异步的
1.解决 setState 异步问题 // 查询 handleSearch(e){// 禁止默认行为e.preventDefault();// 获取 form 表单的值this.setState({p ...
React中setState修改深层对象
在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: state = {list: { ...
前端每周清单第 49 期：Webpack 4 Beta 尝鲜，React Windowing 与 setState 分析
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...
React篇-报错信息：warning: Can't call setState (or forceUpdate) on an unmounted component.
报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...
react源码分析-setState分析
前言是否有过这样的疑问: setState做了什么? setState是如何触发ui变化的? isWorking 如果此时isWorking为true,react将不会立即执行更新操作,而是把更新操 ...

setState 说明

1.1

1.2

1.3

setState 说明相关推荐

最新文章

热门文章