ReactDOM.hydrate()会在客户端上触发生命周期方法吗？

Question

从阵营16个文档有关ReactDOM.hydrate(),

与render()相同,但用于水合其内容由ReactDOMServer呈现的容器.React将尝试将事件侦听器附加到现有标记.

1. 会不会ReactDOM.hydrate()也触发客户端上的生命周期方法,例如componentWillMount(),componentDidMount()在最初的呈现？

2. render()水合期间会在客户端调用方法吗？我想不会,因为这之间的区别ReactDOM.render()和ReactDOM.hydrate()？

如果render不在客户端上调用方法,我们就不会期望componentDidMount()触发生命周期方法.

如果在客户端上没有调用任何生命周期方法,我们如何知道React什么时候完成渲染.我想callback用以下语法:

ReactDOM.hydrate(element,container [,callback])

我想了解当React"试图将事件监听器附加到现有标记"时,是否存在可用的生命周期方法/钩子(可以更好地控制应用程序).

Answer 1

1. 由于ReactDOM.hydrate是(并且应该)在客户端上调用,因此YES应该运行componentDidMount.在服务器上呈现时已调用componentWillMount. componentDidMount不在服务器上运行,因此当您调用hydrate时,应用程序会运行该事件.

2. 将水合物视为一种不同的渲染方法.它确实渲染但不是以相同的方式.它查找服务器呈现的React与客户端React之间的不匹配.它不会再渲染一切.

React期望在服务器和客户端之间呈现的内容是相同的.它可以修补文本内容(例如时间戳)的差异,但是您应该将不匹配视为错误并修复它们

但是你可能想做一些疯狂的事情,比如在客户端渲染完全不同的东西(比在服务器上呈现的东西).为此请注意本段

如果您故意需要在服务器和客户端上呈现不同的内容,则可以执行两次渲染.在客户端上呈现不同内容的组件可以读取像this.state.isClient这样的状态变量,您可以在componentDidMount()中将其设置为true.这样,初始渲染过程将呈现与服务器相同的内容,从而避免不匹配,但在水合后立即同步进行额外的过程.请注意,此方法会使组件变慢,因为它们必须渲染两次,因此请谨慎使用.

所以你可以看到它做了一个渲染过程.如果没有不匹配,React会针对此进行优化.

我希望这是澄清.我讲的是React SSR的经验以及阅读文档的基本理解.