Question

现在使用useEffect s时，componentDidMount可以替换为带有挂钩的React组件。

方案“对服务器的初始唯一调用”：

要做到这一点，useEffect中的DependencyList（useEffect的第二个参数）应该每次都为空数组，否则应用程序将发送每个状态更改对服务器的调用。

这意味着，这是获取数据的最佳做法

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

最佳做法是使用[]作为DependencyList参数来禁用服务器请求每个状态更改的请求吗？

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

Answer 1

是的。这是最好的方法。

从反应docs：

传入空数组[]会告诉React您的效果不依赖于组件中的任何值，因此该效果仅在安装时运行，而在卸载时清除；它不会在更新上运行。

useEffect是一个非常强大的功能，也是我的最爱。您可以通过将一个或多个变量传递到第二个参数数组中来监视它们的状态变化，也可以只使用所使用的方法监听安装和卸载。

Answer 2

这取决于是否要在某些参数更改时调用服务器。如果无论如何都要进行相同的异步调用，则可以使用ssl作为第二个参数。

但是，例如，如果要显示某个用户的个人资料页面，其中每个页面都有一个userID状态/属性，则应将该ID作为值传递到[]的第二个参数中，以便数据将重新获取新的用户ID。 useEffect在这里是不够的，因为如果您直接从用户A转到用户B的个人资料，则可能不需要重新安装组件。

以传统的课堂方式，您可以这样做：

componentDidMount

带有钩子的是：

componentDidMount() {
  this.fetchData();
}

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

尝试运行以下代码，然后查看结果。例如，将id更改为2，以查看useEffect(() => { this.fetchData(); }, [id]);再次运行。

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'));

您应该阅读useEffect，以便了解您可以/不能使用它。

React Hooks异步最佳实践

2 个答案: