建设电影网站数据库脚本,网站建设什么好,网络舆情监测系统软件,网站建设必会的软件有哪些[react] react中怎样阻止组件渲染#xff1f;
class组件
使用shouldComponentUpdate生命周期#xff0c;return false继承React.PureComponent只要prop没有改变(浅比较)#xff0c;就不会执行render函数
函数式组件
使用React.memo包裹组件函数#xff0c;props没有改变就…[react] react中怎样阻止组件渲染
class组件
使用shouldComponentUpdate生命周期return false继承React.PureComponent只要prop没有改变(浅比较)就不会执行render函数
函数式组件
使用React.memo包裹组件函数props没有改变就不会执行函数使用React.memo包裹函数的同时传入比较函数作为第二个参数return true组件函数就不会执行
通用
在jsx的属性包括事件定义中讲能提取的属性值提到外层保证其引用地址不会发生改变,如下
import React from react;class Child extends React.PureComponent {render () {console.log(child render)return h2 style{this.props.style}Child/h2}
}// 优化前:每次按钮的点击都会引起Child组件的rener方法执行
class Demo extends React.Component {onClick () {this.setState({})}render () {return button onClick{this.onClick}test/buttonChild style{{color: red}} //}
}// 优化后:按钮的点击不会引起Child组件的rener方法执行
class Demo extends React.Component {childStyle {color: red}onClick () {this.setState({})}render () {return button onClick{this.onClick}test/buttonChild style{this.childStyle} //}
}export default Demo; 我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论 主目录
与歌谣一起通关前端面试题
