使用react函数组件模拟生命周期

3,730 阅读1分钟

使用react函数组件模拟生命周期钩子以代替类组件

函数组件目前面临的两个问题:

  1. 没有state
  2. 没有生命周期

解决方案

React v16.8.0 推出了Hooks API,其中一个API叫做useState,可以解决函数组件没有State的问题,还有一个API叫做useEffect,可以解决没有生命周期的问题.


用法

useState:

//声明一个数组,第一项为读,第二项为写
const [n,SetN] = useState(0); 

useEffect:

最常用的三个钩子模拟方法如下:

  • 模拟componentDidMount:
useEffect(()=>{console.log('首次渲染页面')},[])
  • 模拟componentDidUpdate:
useEffect(()=>{console.log('任意属性变更')})
useEffect(()=>{console.log('指定元素n变更')},n)
  • 模拟componentWillUnmount:
useEffect(()=>{console.log('首次渲染')
return()=>{
console.log('即将卸载')
}
})

总的来说,函数组件模拟生命周期实际就是多个函数的组合,react函数组件通过多个函数的组合、套用,可以大幅提升使用时的灵活性。