reactjs - React 服务器渲染应用程序中 ComponentDidMount 的替代方案是什么？

Question

我创建了一个同构的 React 应用程序。一切工作正常，直到我尝试在我的元素上添加一些动画。如果它是客户端渲染应用程序，我将通过编写动画函数并在 componentDidMount() 组件生命周期方法中调用该函数来实现。但不幸的是，这个方法不适用于SSR。

在这种情况下如何调用我的动画函数？ (已经尝试过 componentWillMount，但它不起作用)

Answer 1

根据设计，服务器渲染时不应调用任何生命周期方法( componentWillMount 除外)。这是因为服务器端渲染主要用于在数据完全加载之前显示站点布局，并且无法真正帮助客户端动画。

要使生命周期方法在客户端上运行，只需使用 ReactDOM.Hydrate(), which is specifically designed to be used with server rendered content在客户端上使用相同的组件。这样，componentDidMount 和所有其他生命周期方法将按预期工作，同时仍然包含服务器渲染的内容。

如果您不想这样做，并且您只是想使用 React 从服务器生成 HTML，那么您可能应该考虑使用常规模板语言。但是，如果您仍然想在不使用客户端 React 的情况下调用动画，则应该尝试使您的动画使用纯 CSS 动画。