React函数组件模拟生命周期(useEffect)


React Hooks提供React.useEffect来解决函数组件没有生命周期的问题

React.useEffect(fn,?)第一个参数是特定实时机执行的回调函数,第二个参数是指依赖项

  1.模拟componentDidMount第一次渲染

useEffect(() => {
    console.log('');
}, []) // 第二个参数为空时只会在第一次渲染时执行

  2. 模拟componentDidUpdate

useEffect(() => {
    console.log('n变化了');
}, [n]) // 第二个参数为要监听的数据

不传第二个参数,则会在 state 的任意一个属性改变时,组件每渲染一次,都会触发该函数回调
useEffect(() => { console.log('任意属性变化'); })

  3,模拟componentWillUnmount

通过函数里返回函数的方式

useEffect(() => {
    console.log('任意属性变了');
    return () => {
        console.log('该组件要销毁了');
    }
})

  useEffect返回值是一个函数,在组件卸载前执行,或每次副效应函数重新执行之前执行

注意:多个副效应


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM