Question

在React Hooks中，我们可以直接在功能组件内部调用React状态钩子的setState()。官方的React文档here中对此进行了描述。

根据文档：

[Y] ou可以在渲染期间立即更新状态。退出第一个渲染后，React将立即以更新后的状态重新运行组件。

对我来说不清楚的是，“第一次渲染”是指整个组件树的第一次渲染，还是仅是名为setState()的组件的第一次渲染？此外，在该渲染期间安排的效果会发生什么？他们是被处决还是被丢弃？

这种区别对我的用例很重要，因为我正在渲染函数内部调用setState()，以使状态与道具保持同步，如Dan Abramov here所述。在我的用例中，同步到道具的状态和原始道具被传递给孩子。我希望能够依靠道具和状态在子级中同步的事实，如果父级仅在整个组件树渲染后才重新渲染，情况就不会如此。

我的测试

我已经对此进行了测试，似乎setState()会在渲染任何子组件之前立即重新渲染该组件，并丢弃在初始渲染期间安排的所有效果。这是我想要的行为。但是我不知道规格是什么。我在所有情况下都可以依靠这种行为吗？

代码

下面是一些代码来具体说明这一点：

function Foo({x}) {
    const [xPlus1, setXPlus1] = React.useState(x + 1)
    if (xPlus1 !== x + 1) setXPlus1(x + 1)
    useEffect(()=>{
        // Am I guaranteed that this will never throw?
        if (xPlus1 !== x + 1) throw new Error()
    })
    return <Bar x={x} xPlus1={xPlus1} />
}

function Bar({x, xPlus1}) {
    // Am I guaranteed that this will never throw?
    if (xPlus1 !== x + 1) throw new Error()
    return <p> {x} + 1 = {xPlus1} </p>
}

在React Hooks中，在渲染期间直接调用setState时，是否保证重新渲染在子代渲染之前运行？

0 个答案: