react生命周期钩子函数

最近大概看了一些react资料，然后想自己总结记录下来，方便更好地去理解，
然后看完之后越发感觉有vue的影子！
还请各位看官别喷啊
所以说技术都是相通的
各有各的优势
用啥框架都可以
但是就现在北京的就业环境这么卷，还是要会一下react的
谁让咋们都是打工人
框架仔呢哈哈

话不多说开始了

react生命周期分为初始阶段、运行阶段、销毁阶段（16版本）

1.初始化阶段

componentWillMount(()=>{
  console.log('render之前最后一次修改机会')
})
//17版本之后好像要废除该api 会报错警告，需要加UNSAFE_

render(){
  return(
      <div>初始化阶段render</div>
  )
}

componentDidMount(()=>{
  console.log('成功render后并渲染真实DOM，可以修改DOM')
})
//这里可以发起axios网络请求、可以理解为Vue的mounted

2.运行中阶段

componentWillReceiveProps(()=>{
  console.log('父组件修改属性触发')
})

shouldComponentUpdate(()=>{
  console.log('返回false阻止render调用')
})
//这里可以做些性能优化、某些特定场景复合再render，防止页面多次渲染

componentWillUpdate(()=>{
  console.log('不能修改属性和状态')
})
//类似Vue中的beforeUpdate

render(){
  return(
      <div>运行中阶段render</div>
  )
}

componentDidUpdate(()=>{
  console.log('可以修改DOM')
})
//这里可以理解为Vue的update页面改变并需要重新渲染

3.销毁阶段

componentWillUnmount(()=>{
  console.log('销毁组件')
})
//这里可以理解为清除定时器、及一些事件监听器

今天先写这些吧，网上关于生命周期很多，这里仅是个人记录，希望能帮到有需要的朋友吧
下次会写hooks和项目实战
下期见！