我的组件库应该可以在React 18（createRoot/ ReactDom.render）和旧版本的React中运行。有一个逻辑可以修复由并发渲染引起的问题，我只需要在它处于活动状态时（在createRoot中）应用它。仅检测React版本是不够的，因为应用程序可以使用ReactDom. render在“传统”模式下呈现。如何检测是否启用了并发渲染？谢谢
oipij1gg1#
不确定是否有一个标准的方法来检查这一点，但这里有几件事浮现在脑海中。首先，请注意React的createRoot()返回一个ReactDOMRoot示例：
createRoot()
ReactDOMRoot
const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // `ReactDOMRoot` instance console.log(root);
但是，无论版本为何，ReactDOM.render()都会传回null：
ReactDOM.render()
null
const res = ReactDOM.render(<App />, rootElement); // `null` console.log(res);
Link to a React 18 StackBlitz app where both snippets are sampled.因此，第一种方法是检查结果是否为null。如果结果为null，则可以确定无法启用并发模式。如果上面的方法还不够，那么createRoot()返回的ReactDOMRoot示例中有一些有意义的信息。
ReactDOMRoot {_internalRoot: FiberRootNode }
该对象的_internalRoot属性具有tag属性，该属性基本上指示使用并发根还是传统根：
_internalRoot
tag
{ /* ... */ tag: 1, /* ... */ }
1的值对应于ConcurrentRoot值。然而，如果结果是null，那么这意味着已经使用了ReactDOM.render()（即遗留版本），所以我不明白您为什么要检查tag属性（更不用说它在前缀为_的属性后面），但我认为分享这些信息会很有趣：）。
1
_
1条答案
按热度按时间oipij1gg1#
不确定是否有一个标准的方法来检查这一点，但这里有几件事浮现在脑海中。
首先，请注意React的
createRoot()返回一个ReactDOMRoot示例：但是，无论版本为何，
ReactDOM.render()都会传回null：Link to a React 18 StackBlitz app where both snippets are sampled.
因此，第一种方法是检查结果是否为
null。如果结果为null，则可以确定无法启用并发模式。如果上面的方法还不够，那么
createRoot()返回的ReactDOMRoot示例中有一些有意义的信息。该对象的
_internalRoot属性具有tag属性，该属性基本上指示使用并发根还是传统根：1的值对应于ConcurrentRoot值。然而，如果结果是
null，那么这意味着已经使用了ReactDOM.render()（即遗留版本），所以我不明白您为什么要检查tag属性（更不用说它在前缀为_的属性后面），但我认为分享这些信息会很有趣：）。