React中使用setState

不要直接修改 State

state数据不能直接修改，必须要通过setState来修改。但是设置值的时候不能影响到之前state的值，举个栗子：

// 处理数组，不会改变原有数组
this.setState({list1: this.state.list1.concat(100), // 追加list2: [...this.state.list2, 100], // 追加list3: this.state.list3.slice(0, 3), // 截取list4: this.state.list4.filter(item => item > 100), // 筛选// 其他操作，要先用比如const list5Copy = this.state.list5.slice()生成一个副本，然后再对副本做操作list5: list5Copy
})// 处理对象，不会改变原有对象
this.setState({obj1: Object.assign({}, this.state.obj1, {a: 100}),obj2: {...this.state.obj2, a: 100}
})

处理数组时不要使用push pop splice等方式，处理对象时不要直接对this.state.obj进行属性设置，因为这样违反不要直接修改state原则。

setState更新可能是同步也可能是异步

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。比如如下情况：

// 传入对象，会被合并。虽然3次setState, 但count值最后只会加1
this.setState({counter: this.state.counter + 1
})
this.setState({counter: this.state.counter + 1
})
this.setState({counter: this.state.counter + 1
})

此时this.state的更新就是异步更新了。那么有没有办法控制让其同步更新呢？要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

// 大括号包裹的箭头函数写return
this.setState((preState, props) => {return {counter: preState.counter + 1}
})
// 小括号包裹的箭头函数不用写return
this.setState((preState, props) => ({counter: preState.counter + 1
}))
// 普通函数形式
this.setState(function(preState, props) {return {counter: preState.counter + 1}
})

这样的话，this.state就可以保持同步更能，最后显示的counter值是3而不是1了。

State 的更新会被合并

在讲setState更新可能是同步也可能是异步的时候已经讲啦。

参考资料

[1] 正确地使用 State

React中使用setState相关推荐

[react] react中的setState执行机制是什么呢？
[react] react中的setState执行机制是什么呢? 1.将setState传入的partialState参数存储在当前组件实例的state暂存队列中. 2.判断当前React是否处于批量 ...
[react] react中的setState缺点是什么呢？
[react] react中的setState缺点是什么呢? 调用时机不恰当的话可能引起循环调用的问题:比如在componentWillUpdate render componentDidUpdate ...
[react] react中的setState和replaceState的区别是什么？
[react] react中的setState和replaceState的区别是什么? setState:更新状态 replaceState:替换状态个人简介我是歌谣,欢迎和大家一起交流前后端知识 ...
[react] react中的setState是同步还是异步的呢？为什么state并不一定会同步更新？
[react] react中的setState是同步还是异步的呢?为什么state并不一定会同步更新? 由React控制的事件处理程序,以及生命周期函数调用setState不会同步更新state . ...
[react] react中调用setState会更新的生命周期有哪几个？
[react] react中调用setState会更新的生命周期有哪几个? (>=16.4之后,与props的更新一致, <16.4的版本没有static getDerivedStateF ...
react中的setState
setState的使用 1.1. 为什么使用setState 回到最早的案例,当点击一个改变文本的按钮时,修改界面显示的内容: 案例的基础代码如下: import React, { Compone ...
react中的setState详解
1.setState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象( ...
从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
React学习(6)-React中组件的数据-state
前言组件中的state具体是什么?怎么更改state的数据? setState函数分别接收对象以及函数有什么区别? 如何划分组件的状态数据,进行自我的灵魂拷问,以及props与state的灵魂对比 ...