济南高端网站制作公司,视频wordpress,注册自媒体账号平台,工程项目查询哪个网站问题
只要执行setState()#xff0c;即使不改变状态数据#xff0c;组件也会重新render()只当前组件重新render()#xff0c;就会自动重新render子组件
原因
Component中的shouldComponentUpdate()总是返回true
思路
只有当组件的state或props数据发生改变时才重新rend…问题
只要执行setState()即使不改变状态数据组件也会重新render()只当前组件重新render()就会自动重新render子组件
原因
Component中的shouldComponentUpdate()总是返回true
思路
只有当组件的state或props数据发生改变时才重新render()
解决
重写shouldComponentUpdate()方法比较新旧state或props数据如果有变化才返回true如果没有返回false使用PureComponentPureComponent重写了shouldComponentUpdate()方法只有state或props数据有变化才返回true。只进行state和props数据的浅比较如果只是数据对象数据变了返回false
案例
import React, { PureComponent } from react
import ./index.cssexport default class Parent extends PureComponent {state { carName: 奔驰 }changeCar (){this.setState({carName:五菱})}// shouldComponentUpdate(nextProps,nextState){// console.log(this.state:,this.state,this.props:,this.props,nextProps:,nextProps,nextState:,nextState);// return !(this.state.carName nextState.carName)// }render() {console.log(Parent-render);const { carName } this.statereturn (div classNameparenth5parent组件/h5span我的车是{carName}/spannbsp;nbsp;nbsp;button onClick{this.changeCar}换车/buttonChild car木马/Child/div)}
}class Child extends PureComponent {// shouldComponentUpdate(nextProps,nextState){// console.log(this.state:,this.state,this.props:,this.props,nextProps:,nextProps,nextState:,nextState);// return !(this.props.car nextProps.car)// }render() {console.log(Child-render);return (div classNamechildh5child组件/h5divChild组件从Parent组件拿到的车是{this.props.car}/div/div)}
} 样式文件
.parent{width: 500px;background-color: aqua;padding: 20px;
}.child{width: 90%;background-color:bisque;padding: 20px;margin-top: 30px;
}效果实现
