React学习笔记之三（关于setState的若干问题及其讨论)

setState的异步更新
在组件中并没有实现setState方法，但是为什么可以调用呢？
原因很简单，setState继承自component
setState是异步更新的，我们并不能在执行完setState之后立马拿到最新的state的结果。原因在于setState之所以设计为异步，是因为可以显著提升性能，如果每次调用setState都进行一次更新，那么意味着render函数会频繁的被调用，界面被重新渲染，这样的效率是很低的。最好的办法是获取到多个更新，之后进行批量更新。第二点原因是如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步。state和props不能保持一致性，会在开发中产生很多问题。

// setState的回调
// setState接受两个参数，第二个是回调函数，这个回调函数会在更新之后会执行
// setState(partialState, callback)
changeText() {this.setState({message: "hello, react"}, () => {console.log(this.state.message)}); // hello react
}// 当然，我们也可以在生命周期函数中使用:
componentDidUpdate(prevProps, provState, snapshot) {console.log(this.state.message);
}

关于setState一定是异步的吗的若干讨论？

// 在组件生命周期或React合成事件中，setState是异步的。
// 在setTimeout或者原生的dom事件中，setState是同步的。```javascript
// 在setTimeout中的更新
changeText() {setTimeout(() => {this.setState({message: "你好啊，李银河";})console.log(this.state.message); // "你好啊，李银河";}, 0)
}
// 原生的DOM事件
componentDidMount() {const btnEl = document.getElementById("btn");btnEl.addEventListener('click', () => {this.setState({message: "hello react"});console.log(this.state.message)})
}

// 通过state去修改message，是不会对name产生影响的。
源码中其实是有对原对象和新对象进行合并的。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201211192709130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MDQ4NTMy,size_16,color_FFFFFF,t_70)Object.assign({}, prevState, partialState);多个state的合并：我们对setState里面传入一个函数而不是一个对象：```javascript
increment() {this.setState((state, props) => {return {counter: state.counter + 1}
})
}

2. diff算法的更新策略：
情况一：对比不同类型的元素：

情况二：对比同一类型的元素：

在我们之前的使用案例中，在App中我们增加了一个计算器，代码，当App的render函数被调用的时候，所以的子组件的render函数都会被重新调用。
而事实的情况是：很多组件都没有必须要重新render，他们调用render函数的前提是，就是依赖的数据(state, props)发生改变时，再调用自己的render方法。
如何来控制render方法的调用呢，通过shouldComponentUpdate方法

React学习笔记之三（关于setState的若干问题及其讨论)相关推荐

react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
linux系统管理学习笔记之三----软件的安装
linux系统管理学习笔记之三----软件的安装 2009-12-29 19:10:02 标签:linux 系统管理 [推送到技术圈] 版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
学习笔记之三人表决器FPGA
学习笔记之三人表决器FPGA 新手入门,多多包涵,不足错误之处,望指出三人表决器,顾名思义就是三人投票,只要达到两票以上,就取胜. 设a,b,c为三个投票的人,输出的为f,投为1,不投为0,两票以上 ...
2010年SQLite学习笔记之三
2010年SQLite学习笔记之三一．如何备份数据库先打开数据库test.db E:/sqlite/tool/sqlite-3_6_22>sqlite3 D:/Test/debug/tes ...
java setstate,react学习笔记之state以及setState的使用
在react中通过 state 以及 setState() 来控制组件的状态. state state 是 react 中用来存储组件数据状态的,可以类比成 vue 中的 data. 1.state的 ...

React学习笔记之三（关于setState的若干问题及其讨论)

React学习笔记之三（关于setState的若干问题及其讨论)相关推荐

最新文章

热门文章