由于这里解释的时间太长(而且不是很相关),我希望能够绕过 React 的渲染批处理并强制组件树立即在某些 DOM 元素中渲染,即使这意味着强制布局和应用程序的减速.
我不需要绑定(bind)任何监听器——我只需要测量渲染组件的尺寸,然后将其从 DOM 中移除。
我能想到的唯一解决方案是渲染成字符串并设置容器的 innerHTML,但是 renderToString
方法仅适用于 react-dom/server
通过查看代码,它似乎在整个 React 库中全局更改了批处理策略。
有任何想法吗?
最佳答案
根据我的测试, 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>
关于javascript - 如何使用 React 同步渲染组件(或渲染到字符串),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37979778/