React Server 渲染应用程序中 ComponentDidMount 的替代方案是什么?

What's the alternative to ComponentDidMount in React Server Rendered Application?

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

在这种情况下如何调用我的动画函数? (已经尝试过 componentWillMount,它不工作)

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

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

如果您不想这样做,而您 只是 想使用 React 从服务器生成 HTML,您应该考虑使用常规的相反,模板语言。但是,如果您仍然想在不使用 React 的情况下从客户端调用动画,您应该尝试让您的动画使用纯 CSS 动画。