react的生命周期

initalization组件初始化

调用一个方法：constrctor

 

Mounting：组件的挂载阶段

componentWillMount组件将要挂载

→render（渲染，render方法里是页面上展示的内容）

→componentDidMount组件挂在完成（axios请求数据在这里）

 

Updation更新阶段（props和state）

props

会执行componentWillReceiveProps组件即将接收props信息（组件接收到新的属性信息之后触发 每次属性改变之后都会执行）

→shouldComponentUpdate组件是否要更新，如果返回true（下面有代码解释）

→componentWillUpdate组件将要更新

→render渲染

→componentDidUpdate组件更新完成

state

会执行shouldComponentUpdate组件是否要更新，如果返回true

→componentWillUpdate组件将要更新

→render渲染

→componentDidUpdate组件更新完成

 

Unmounting卸载

componentWillUnmount

// 定义一个组件用来控制是否显示指定的Counter组件 
//判断step是否为2的倍数，2的倍数不卸载 
const IsShowCounter = () => { 
    if (step % 2 === 0) {
     return <Count step={step} />;
     } else { 
    return <p>当前不需要显示Counter</p>; 
    } 
};

 

是否更新

shouldComponentUpdate用来判断组件是否需要更新,我们在实际开发的时候可以根据实际传入的数据来做动态的判断 
// 此操作常常在做性能优化的时候用到 
// 此方法默认返回的是true 
// 如果返回true会执行后续的更新方法 
shouldComponentUpdate (nextProps, nextState) { 
console.log('组件是否需要更新'); 
//console.log(nextProps); 
console.log(nextState);
 return nextState.count % 2 === 0; 
}