Open shoutingwei opened 6 years ago
static componentWillReceiveProps是本组件收到新props就会发生,还是不论是否收到,只要外部组件有render就会发生?
第一阶段: 初始化 初始化props
static defaultProps = {
name: 'sls',
age:23
};
//or
Counter.defaltProps={name:'sls'}
初始化state
constructor() {
super();
this.state = {number: 0}
}
componentWillMount() 组件即将被渲染到页面之前触发,此时可以进行开启定时器、向服务器发送请求等操作????
render() 组件渲染
第二阶段:运行中 componentWillReceiveProps() 组件收到新的props
shouldComponentUpdate() 收到新的props 和 state时触发,首次渲染不触发
shouldComponentUpdate(newProps, newState) {
if (newProps.number < 5) return true;
return false
}
//该钩子函数可以接收到两个参数,新的属性和状态,返回true/false来控制组件是否需要更新。
一般通过该函数来优化性能: 一个React项目需要更新一个小组件时,很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法,形成新的虚拟DOM,再用diff算法对新旧虚拟DOM进行结构和属性的比较,决定组件是否需要重新渲染
可在shouldComponentUpdate()中加入条件判断,从而优化性能。
例如React中的就提供了一个_PureComponent_的类,当我们的组件继承于它时,组件更新时就会默认先比较新旧属性和状态,从而决定组件是否更新。值得注意的是,PureComponent进行的是浅比较,所以组件状态或属性改变时,都需要返回一个新的对象或数组
componentWillUpdate() 组件即将被更新时触发
componentDidUpdate() 组件被更新完成后触发。页面中产生了新的DOM的元素,可以进行DOM操作