react使用setState注意事项

React设计setState方法就是为了重新渲染页面

看看下面的代码实现的结果：

state = {value ： 0
}function test() {this.setState({ value: this.state.value + 1 });this.setState({ value: this.state.value + 1 });this.setState({ value: this.state.value + 1 });
}test()   //发现最后value 是1，只加了一次function test1() {this.setState((state, props) => ({ value: state.value + 1 }));this.setState((state, props) => ({ value: state.value + 1 }));this.setState((state, props) => ({ value: state.value + 1 }));
}test1()  // 发现最后value 是3, 结果就如我们所意了

因为使用函数式setState，React会保证每次调用函数时，state都已经合并了之前的状态修改结果。

多次setState会合并

前面我们了解到setState并不会立即改变state的值，而是将其放到一个任务队列里，最终将多个setState合并，一次性更新页面。所以我们可以在代码里多次调用setState，每次只需要关注当前修改的字段即可。

多次setState会合并为什么会合并

主要是setState触发页面重新渲染，需要经过以下生命周期：

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

经过测试，其实state的值只有在render的时候才真正被修改了

// shouldComponentUpdate: 0// componentWillUpdate: 0// render: 1// componentDidUpdate: 1// shouldComponentUpdate: 1// componentWillUpdate: 1// render: 2// componentDidUpdate: 2// shouldComponentUpdate: 2// componentWillUpdate: 2// render: 3// componentDidUpdate: 3

react使用setState注意事项相关推荐

初学React，setState后获取到的thisstate没变，还是初始state？
问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state? 描述: getInitialState(){return {data:[]};}, ...
[react] react中setState的第二个参数作用是什么呢？
[react] react中setState的第二个参数作用是什么呢? 第二个参数是一个callback函数,用于setState设置state的属性值成功之后的回调,此时调用this.state.p ...
React之setState使用
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
react 解决 setState 异步问题
react 解决 setState 异步问题参考文章: (1)react 解决 setState 异步问题 (2)https://www.cnblogs.com/crazycode2/p/97158 ...
React学习笔记六 React拓展 - SetState
React拓展 - setState setState更新状态的两种写法 1.setState({}, [callback]) export default class Test extends Co ...
React中setState方法详解
一.为什么要使用 setState 方法,如何用? 在 React 中,组件分为有状态组件和无状态组件,有状态组件就是能够定义 state 的组件,比如类组件,无状态组件反之,比如函数组件.st ...
react+react-beautiful-dnd实例代办事项
react+react-beautiful-dnd应用效果预览实现思路 index.js入口文件配置 import React from 'react' import ReactDOM from ...
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使用setState注意事项相关推荐

最新文章

热门文章