useEffect React hook 的使用方法

找出useEffect React钩子的用处，以及如何使用它

如果你是新手，请先看看我的React钩子介绍。

我经常使用的一个React钩子是useEffect 。

import React, { useEffect } from 'react'

useEffect 函数在组件首次渲染时运行，并在随后每次重新渲染/更新时运行。

React首先更新DOM，然后调用传递给useEffect() 的函数。

例子。

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Flavio')

  useEffect(() => {
    console.log(`Hi ${name} you clicked ${count} times`)
  })

  return (
    <div>
      <p>
        Hi {name} you clicked {count} times
      </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={() => setName(name === 'Flavio' ? 'Roger' : 'Flavio')}>
        Change name
      </button>
    </div>
  )
}

提示：如果你是一个老牌的React开发者，你已经习惯了componentDidMount,componentWillUnmount 和componentDidUpdate 事件，这将取代这些事件。

你可以选择从你传递给useEffect() 的函数中返回一个函数。

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

你返回的那个函数中包含的代码将在组件被卸载时执行。

你可以用它来做任何你需要做的 "清理"。

对于老资格的人来说，这就像componentWillUnmount

useEffect() 可以被多次调用，这对分离不相关的逻辑很有好处。

由于useEffect() ，这些函数会在随后的每次重新渲染/更新时运行，为了性能，我们可以告诉React跳过执行该函数，方法是添加第二个参数，即一个包含要注意的状态变量列表的数组。

只有当这个数组中的一个项目发生变化时，React才会重新运行这个副作用。

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

同样地，你可以通过传递一个空数组，告诉React只执行一次副作用（在加载时间）。

useEffect(() => {
  console.log(`Component mounted`)
}, [])

这个☝️是我一直在使用的东西。

Codepen上的例子。

参见CodePen上Flavio Copes(@flaviocopes)的PenReact Hooks例子#3副作用。