使用react函数组件模拟生命周期钩子以代替类组件
函数组件目前面临的两个问题:
- 没有state
- 没有生命周期
解决方案
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函数组件通过多个函数的组合、套用,可以大幅提升使用时的灵活性。