javascript - 如何使用 React 同步渲染组件(或渲染到字符串)

Question

由于这里解释的时间太长(而且不是很相关)，我希望能够绕过 React 的渲染批处理并强制组件树立即在某些 DOM 元素中渲染，即使这意味着强制布局和应用程序的减速.

我不需要绑定(bind)任何监听器——我只需要测量渲染组件的尺寸，然后将其从 DOM 中移除。

我能想到的唯一解决方案是渲染成字符串并设置容器的 innerHTML，但是 renderToString方法仅适用于 react-dom/server通过查看代码，它似乎在整个 React 库中全局更改了批处理策略。

有任何想法吗？

Answer 1

根据我的测试， React.render 似乎是同步的。看看这个片段:

class MyComponent extends React.Component {
  render(){ return <h1>Hello</h1>; }
}

const root = document.getElementById('root');

const testDiv = document.createElement('div');

root.appendChild(testDiv);

ReactDOM.render(<MyComponent />, testDiv);

document.getElementById('size').innerText = `${testDiv.clientWidth}px x ${testDiv.clientHeight}px`;
document.getElementById('inner-html').innerText = testDiv.innerHTML;

root.removeChild(testDiv);

<div id="root"></div>
<div>Size: <span id="size"></span></div>
<div>innerHTML: <span id="inner-html"></span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>