Reack hooks useEffect 总结

useEffect 总结

特性

• 参数必须是一个回调函数与一个数组
• 组件首次加载会执行一次useEffect的回调，之后依赖的值更新则会执行useEffect中的回调。
• 如果第二个参数是一个空数组则意味着=>空数组不依赖任何东西，所以只会执行一次类似类组件中的componentDidMounted
• 可以使用多次
• 可以返回一个回调函数
  • 如果无依赖 useEffect返回的函数 执行时机是组件被销毁时会触发
  • 如果有依赖 当依赖发生改变时会执行该useEffect返回的函数

举个栗子

import React, { useEffect, useState } from 'react'

export default function App() {
  const [name, setName] = useState('bingquan')
  useEffect(()=> {
    setName(`${name.slice(0, 1).toUpperCase()}${name.slice(1, name.length)}`); // 首次触发该回调，将name的状态同步最新，然后重新渲染App组件，其次当外界改变最新状态则又会进入该回调，从而保证最新的状态
  }, [name]) // 第一次执行一次，之后name（依赖）更新也会执行
  return (
    <div>
      App-{name}
      <button onClick={()=> {
        setName('tianhui')
      }}>click</button>
    </div>
  )
}

特殊的用法

• 由于React17之后使用了hook导致函数组件没有生命周期，导致无法实现一些特殊的需求，例如当组件销毁后我们需要关闭组件的定时器，和一些任务，我们第一时间想到的肯定是使用类组件中的生命周期componentWillUnmount，但函数组件中却没有生命周期，所以我们可以利用useEffect回调函数返回出一个回调函数，这时当组件销毁时会执行该返回出的回调

举个例子

/*
 * @Author: HuangBingQuan [email protected]
 * @Date: 2022-11-27 21:02:08
 * @LastEditors: HuangBingQuan [email protected]
 * @LastEditTime: 2022-11-30 18:25:10
 * @FilePath: /react_test/src/02-advanced/19-生命周期-销毁.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component, useEffect, useState } from 'react'


export default function App() {
  const [isCreated, setIsCreated] = useState(true)
  return (
    <div>
      <button onClick={()=> {
        setIsCreated(!isCreated)
      }}>click</button>
      { isCreated && <Child></Child>}
    </div>
  )
}

const Child = ()=> {
  useEffect(()=> {
    let timer = setInterval(()=> {
      console.log(10);
    }, 1000)
    window.onresize = (e)=> {
      console.log(e);
    }
    return ()=> { // 如果无依赖 useEffect返回的函数 执行时机是组件被销毁时会触发 如果有依赖 当依赖发生改变时会执行该useEffect返回的函数
      console.log('组件销毁了');
      clearInterval(timer);
      window.onresize = null;
    }
  }, [])
  return (
    <div>Child</div>
  )
}