Question

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

React是否支持任何简便的方法？

Answer 1

我有同样的问题。我设法通过自定义钩子并通过在服务器端两次渲染应用程序来解决它。整个过程如下：

在第一个渲染期间，收集所有效果到全局背景，
第一次渲染后，等待所有效果消除，
使用所有数据第二次呈现应用程序。

我写了一个article，并附有描述此方法的示例。这是指向CodeSandbox上的示例表单文章的直接链接。

我还发布了一个NPM软件包，简化了此过程-useSSE on GitHub。

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");
    };
  }, []);

}

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

2 个答案: