useEffect

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

基础示例

Live Editor

function Example() { const [count, setCount] = useState(0) // 类似于componentDidMount和componentDidUpdate： useEffect(() => { // 使用浏览器API更新文档标题 document.title = `您点击了 ${count} 次` }) return ( <div> <p>您点击了 {count} 次</p> <Button variant="outlined" onClick={() => setCount(count + 1)}> 点击 </Button> </div> ) }

function Example() {
  const [count, setCount] = useState(0)

  // 类似于componentDidMount和componentDidUpdate：
  useEffect(() => {
    // 使用浏览器API更新文档标题
    document.title = `您点击了 ${count} 次`
  })

  return (
    <div>
      <p>您点击了 {count} 次</p>
      <Button variant="outlined" onClick={() => setCount(count + 1)}>
        点击
      </Button>
    </div>
  )
}

Result

Loading...

组件挂载执行

当第2个参数为空数组 [] 时，初始化调用一次之后将不再执行，相当于 componentDidMount

useEffect(() => {
  console.log('只打印1次')
}, [])

数据更新执行

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

function Example() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = `您点击了 ${count} 次`
  }, [count])

  return (
    <div>
      <p>您点击了 {count} 次</p>
      <Button variant="outlined" onClick={() => setCount(count + 1)}>
        点击
      </Button>
    </div>
  )
}

上面这个示例中，我们传入 [count] 作为第二个参数。这个参数是什么作用呢？如果 count 的值是 5，而且我们的组件重渲染的时候 count 还是等于 5，React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比较。因为数组中的所有元素都是相等的(5 === 5)，React 会跳过这个 effect，这就实现了性能的优化。

当渲染时，如果 count 的值更新成了 6，React 将会把前一次渲染时的数组 [5] 和这次渲染的数组 [6] 中的元素进行对比。这次因为 5 !== 6，React 就会再次调用 effect。如果数组中有多个元素，即使只有一个元素发生变化，React 也会执行 effect。

组件卸载执行

useEffect(() => {
  console.log('我每次都执行')　　　　　

  // componentWillUnMount
  return () => {
    // 卸载前处理，如：清除定时器、socket连接、web存储等
  }
})

更新全局Store

useEffect(() => {
  // ...
}, [
  global.time,
  global.count
])