当全局状态通过钩子更新时，React组件的重新呈现顺序是什么

Question

给定一个顶级App组件，该组件呈现以下层次结构：

<Parent>
<Child />
</Parent>

如果Parent和Child都调用同一个钩子来获得某个全局状态，并且该状态发生了变化，那么Parent或Child会首先被重新渲染吗？

此外，假设它们都使用全局状态中的某个变量user，并且如果user未定义，则Parent仅呈现其children属性。Child道具是否会使用undefineduser进行渲染？

Answer 1

这是一个记录父级和子级装载/卸载的片段。只有当状态值为奇数时，才会渲染子项。两个组件都在访问相同的上下文。

const { useState, createContext, useContext, useEffect, useRef } = React;
const ViewContext = createContext();
const ActionsContext = createContext();
function MyContainer() {
const [contextState, setContextState] = useState(0);
return (
<ViewContext.Provider value={contextState}>
<ActionsContext.Provider value={setContextState}>
<Incrementor />
<Parent />
</ActionsContext.Provider>
</ViewContext.Provider>
)
}
function Incrementor() {
const setContextState = useContext(ActionsContext);
const increment = () => {
console.clear();
setContextState(p => p + 1);
}
return <button onClick={increment}>increment</button>;
}
function Parent() {
const contextState = useContext(ViewContext);
useEffect(() => {
console.log(contextState, ' - Parent Mounted');
return () => console.log(contextState, ' - Parent Unmounted');
}, [contextState]);
return (
<div>
<p>This is the parent: {contextState}</p>
{contextState % 2
? <ConditionalChild />
: null}
</div>
);
}
function ConditionalChild() {
const contextState = useContext(ViewContext);
useEffect(() => {
console.log(contextState, ' -  Child Mounted');
return () => console.log(contextState, ' -  Child Unmounted');
}, [contextState]);
return (
<div>
<p>This is the child: {contextState}</p>
</div>
);
}
ReactDOM.render(
<MyContainer />,
document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>