8被浏览621分享邀请回答1添加评论分享收藏感谢收起react闲谈——shouldComponentUpdate避免组件无意义渲染_Javascript教程-织梦者
当前位置:&>&&>& > react闲谈——shouldComponentUpdate避免组件无意义渲染
react闲谈——shouldComponentUpdate避免组件无意义渲染
state有时候很不听话，在某些时候，我不想他渲染，偏偏react非常智能的帮我们重复渲染。
比如最常见的就是传递的对象为空，组件依旧渲染了一次或者多次。
更多场景不举例了，对症下药。
shouldComponentUpdate是react提供的生命周期函数，他发生在接收到新的props的时候。简单介绍一下各个生命周期函数。
componentWillMount：组件挂载之前执行，只执行一次
componentDidMount: 组件渲染完成，只执行一次
=======================================================
componentWillRecevieProps: 组件将要接收新的props执行
shouldComponentUpdate: 判断组件是否应该重新渲染，默认是true
componentWillUpdate: 组件将要重新渲染
componentDidUpdate: 组件重新渲染完成
=======================================================
componentWillUnmount: 卸载组件
组件生命周期是有顺序的，首先挂载组件，挂载成功完成第一次渲染，然后传递新的props，则会触发componentWillRecevieProps，执行重新渲染的周期，直至渲染完成。
在你的组件内部加上这段代码
component.js
shouldComponentUpdate(nextProps, nextState) {
if (_.isEqual(this.props, nextProps) || !_.isEmpty(this.props)) {
return false
return true
这里用到了_.isEqual和_.isEmpty，_.isEqual判断当前传进来的值和下一次传递的值是不是相等，是则返回true，_.isEmpty判断当前传递进来的对象是不是为空，为空则返回true。
_.isEqual和_.isEmpty是 lodash 插件里面的函数，这是个轻巧的JavaScript函数插件，可以处理多种常见的数据操作，当然还有一个更多功能的插件。
在你的react项目的入口js导入lodash，因为lodash函数是全局的，所以只需要在入口导入一次即可。
npm install --save lodash
import ‘lodash’
今天只分享这一个简单的解决方案，更多小技巧，敬请期待后续文章。以上就是对react闲谈——shouldComponentUpdate避免组件无意义渲染的相关介绍，希望对您学习javascript有所帮助，感谢您关注织梦者!
这些内容可能对你也有帮助
更多可查看Javascript教程列表页。
猜您也会喜欢这些文章问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
componentDidMount(){
const {user} = this.
console.log('user')
console.log(user)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
组件已经挂载完成肯定可以拿到this.props.user的，前提是你有这个属性传进来。话说你给的代码上下文信息太少了，没法看你的问题在哪里。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
目测没有connect store
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
代码可以放多点么....
该答案已被忽略，原因：无意义的内容 - 赞、顶、同问等毫无意义的内容
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}