react 使用 useEffect 只执行一次

本文主要讲解 使用 useEffect 在函数式组件中只执行一次，但是会报警告的问题该如何去解决

首先只执行一次的话，使用函数作为useEffect回调，然后依赖项传空，像这样

useEffect(fetchBusinesses, [])

但是这样有一个问题，就是如果不填写依赖项，eslint 会抱一个警告，提示你需要依赖 fetchBusinesses

1. 解决警告的一种方法是：声明内部功能 useEffect()，将 fetchBussinesses 方法放在 effect 内部去声明

useEffect(() => {
  function fetchBusinesses() {
    ...
  }
  fetchBusinesses()
}, [])

2. 第二种，使用 useCallback() 

const fetchBusinesses = useCallback(() => {
  ...
}, [])

useEffect(() => {
  fetchBusinesses()
}, [fetchBusinesses])

如果以上两种都没办法满足你

3. 第三种，禁用eslint的警告

useEffect(() => {
  fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps

4. 如果要在整个项目中删除警告，可以将其添加到eslint配置中：

[ESLint] Feedback for 'exhaustive-deps' lint rule · Issue #14920 · facebook/react · GitHubhttps://github.com/facebook/react/issues/14920具体可以参考这个文章

  {
    "plugins": ["react-hooks"],
    "rules": {
      "react-hooks/exhaustive-deps": 0
    }
  }