如何使用 React Hooks 执行服务器端数据获取

Question

我们刚刚从 React 生命周期开始进入 React Hooks，我们注意到的一件事是，在将呈现的页面发送给用户之前，没有直接的方法来运行类似于 ComponentWillMount 的东西来加载数据（因为 useEffect 不是在 SSR 上运行）。

React 是否支持任何简单的方法来做到这一点？

Answer 1

我有同样的问题。我已经设法使用自定义挂钩并在服务器端渲染应用程序两次来解决这个问题。整个过程是这样的：

• 在第一次渲染期间，收集全局上下文的所有效果，
• 第一次渲染后等待所有效果解决，
• 使用所有数据第二次渲染应用程序。

我写了一篇文章，其中包含描述这种方法的示例。这是CodeSandbox上示例表单文章的直接链接。

另外，我还在 GitHub 上发布了一个简化此过程的 NPM 包 - useSSE。

Answer 2

这有点棘手，但一种解决方法是直接在组件中进行提取，如下所示

 function LifeCycle(props){
  console.log("perform the fetch here as in componentwillmount")
  const [number, setNumber] = useState(0)

   useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentDidUnmount");
    };
  }, []);

}