Question

由于这里解释的原因太长（并且不太相关），我希望能够绕过React的渲染批处理并强制组件树立即在某些DOM元素中呈现，即使它意味着强制布局和减速申请书。

我不需要绑定任何侦听器 - 我只需要测量渲染组件的尺寸，然后将其从DOM中删除。

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

有什么想法吗？

Answer 1

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

我使用以下（脏）方法在我的应用程序中维护同步流：

var doneRendering = false;

ReactDOM.render(component, container, function () {
    doneRendering = true;
});

while (!doneRendering) {
    console.log("Waiting");
}

console.log(container);

相反，您也可以使用像here这样的轮询方法，它基本上用类似

的方式替换while循环

var interval = setInterval(function() {
    if (doneRendering) {
        clearInterval(interval);
        console.log(container);
    }
}, 100);

如何使用React同步渲染组件（或渲染为字符串）

2 个答案: