App.js

importReact, { useState, useEffect } from‘react’ /** * useEffect * 挂载 更新 卸载 */ function Header() { const [strState, setStrState] = useState(‘拉勾教育’) const [numState, setNumState] = useState(10) //第一个参数是函数，函数体是挂载和更新的操作，卸载通过return的函数执行 useEffect(() => { console.log(‘挂载与更新操作完成了’) return () => { console.log(‘卸载的时候执行’) } }, [strState]) //第二个参数是数组，只有[]中的依赖变化时useEffect才会更新 return ( <div> <p>{strState}<buttononClick={() => { setStrState(‘大前端’) }}>修改字符</button></p> <p>{numState}<buttononClick={() => { setNumState(numState + 1) }}>修改数值</button></p> </div> ) } functionApp() { const [isShow, setIsShow] = useState(true) return ( <div> {isShow && <Header/>} <hr/> <buttononClick={() => { setIsShow(!isShow) }}>切换</button> </div> ) } exportdefaultApp
useEffect 快速上手
useEffect 可以接收两个参数，分别是回调函数与依赖数组，如下面代码所示： useEffect(callBack, []) useEffect 用什么姿势来调用，本质上取决于你想用它来达成什么样的效果。下面我们就以效果为线索，简单介绍 useEffect 的调用规则。
  • 每一次渲染后都执行的副作用：传入回调函数，不传依赖数组。调用形式如下所示：
useEffect(callBack)
  • 仅在挂载阶段执行一次的副作用：传入回调函数，且这个函数的返回值不是一个函数，同时传入一个空数组。调用形式如下所示：
useEffect(()=>{ // 这里是业务逻辑 }, [])
  • 仅在挂载阶段和卸载阶段执行的副作用：传入回调函数，且这个函数的返回值是一个函数，同时传入一个空数组。假如回调函数本身记为 A， 返回的函数记为 B，那么将在挂载阶段执行 A，卸载阶段执行 B。调用形式如下所示：
useEffect(()=>{ // 这里是 A 的业务逻辑 // 返回一个函数记为 B return ()=>{ } }, []) 这里需要注意，这种调用方式之所以会在卸载阶段去触发 B 函数的逻辑，是由 useEffect 的执行规则决定的：useEffect 回调中返回的函数被称为“清除函数”，当 React 识别到清除函数时，会在调用新的 effect 逻辑之前执行清除函数内部的逻辑。这个规律不会受第二个参数或者其他因素的影响，只要你在 useEffect 回调中返回了一个函数，它就会被作为清除函数来处理。
  • 每一次渲染都触发，且卸载阶段也会被触发的副作用：传入回调函数，且这个函数的返回值是一个函数，同时不传第二个参数。如下所示：
useEffect(()=>{ // 这里是 A 的业务逻辑 // 返回一个函数记为 B return ()=>{ } }) 上面这段代码就会使得 React 在每一次渲染都去触发 A 逻辑，并且在下一次 A 逻辑被触发之前去触发 B 逻辑。 其实你只要记住，如果你有一段 effect 逻辑，需要在每次调用它之前对上一次的 effect 进行清理，那么把对应的清理逻辑写进 useEffect 回调的返回函数（上面示例中的 B 函数）里就行了。
  • 根据一定的依赖条件来触发的副作用：传入回调函数，同时传入一个非空的数组，如下所示：
useEffect(()=>{ // 这是回调函数的业务逻辑 // 若 xxx 是一个函数，则 xxx 会在组件每次因 num1、num2、num3 的改变而重新渲染时被触发 return xxx }, [num1, num2, num3]) 这里我给出的一个示意数组是 [num1, num2, num3]。首先需要说明，数组中的变量一般都是来源于组件本身的数据（props 或者 state）。若数组不为空，那么 React 就会在新的一次渲染后去对比前后两次的渲染，查看数组内是否有变量发生了更新（只要有一个数组元素变了，就会被认为更新发生了），并在有更新的前提下去触发 useEffect 中定义的副作用逻辑。