React Hooks异步最佳实践

Question

现在，在使用useEffect后，React组件中的componentDidMount有了替代品（Hook）。

场景：“首次调用服务器”：

为了实现这一点，每次在useEffect的DependencyList参数（第二个参数）中传入一个空数组，否则应用程序会对每个状态更改发送一次fetch调用到服务器。

意思是，这是获取数据的最佳实践。

useEffect(() => {
  console.log("useEffect, fetchData here");
}, []);

最佳实践是使用 [] 作为 DependencyList 参数以禁止服务器在每次状态更改时请求吗？

GitHub 链接： https://github.com/facebook/react/issues/14326

- R J Funnel404

---

React正在开发“React Suspense”，旨在使此类操作更加容易。与此同时，我创建了自己的组件，使这样的操作变得更加容易。如果您感兴趣，我将在下面发布一小段代码片段。附注：是的，我使用[]，但请注意闭包。 - Keith

Answer 1

是的，这是最好的方法。

来自React 文档:

传入一个空数组[]作为输入告诉React，您的effect不依赖组件中的任何值，因此该effect仅在挂载时运行并在卸载时清除；它不会在更新时运行。

useEffect 是非常强大且我最喜欢的hook。您可以通过将它们传递到第二个参数数组中来监视一个或多个变量的状态更改，或者您可以使用您正在使用的方法来监听挂载和卸载。

- Don Brody

Answer 2

这取决于你是否希望在某些参数更改时调用服务器。如果你想始终进行异步调用，则可以将[]作为第二个参数使用。

然而，如果你例如正在显示用户的个人资料页面，每个页面都有一个userID状态/属性，那么应该将该ID作为值传递到useEffect的第二个参数中，以便为新的用户ID重新获取数据。在这里，componentDidMount是不够的，因为如果你直接从用户A转到用户B的个人资料，组件可能不需要重新挂载。

在传统的类方式中，你会这样做：

componentDidMount() {
  this.fetchData();
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.id !== this.state.id) {
    this.fetchData();
  }
}

使用钩子，代码应该如下所示：

useEffect(() => {
  this.fetchData();
}, [id]);

尝试运行下面的代码并查看结果。例如将id更改为2，以查看useEffect再次运行。

function Todo() {
  const [todo, setTodo] = React.useState(null);
  const [id, setId] = React.useState(1);
  
  React.useEffect(() => {
    if (id == null || id === '') {
      return;
    }
    
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then(results => results.json())
      .then(data => {
        setTodo(data);
      });
  }, [id]); // useEffect will trigger whenever id is different.

  return (
    <div>
      <input value={id} onChange={e => setId(e.target.value)}/>
      <br/>
      <pre>{JSON.stringify(todo, null, 2)}</pre>
    </div>
  );
}

ReactDOM.render(<Todo />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.8.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.1/umd/react-dom.development.js"></script>

<div id="app"></div>

您应该了解 useEffect，以便知道您可以/不可以使用它做什么。

- Yangshun Tay