我如何等待子组件使用 React 钩子“准备好”？答案

【问题标题】：How do I wait for child components to be "ready" with React hooks?我如何等待子组件使用 React 钩子“准备好”？
【发布时间】：2020-08-26 10:37:14
【问题描述】：

所以我有一个Page 组件，其中包含多个Column 组件，每一列都包含不同的用户特定标记。

在Page 组件中，我需要做一些额外的突变（比如列溢出检查、推送列内容等）。出于这个原因，我需要一种在所有 Column 组件已安装后收到通知的方法 - 也包括已进行的隐式突变。

我的第一次尝试是 useEffect 钩子，但是，它确实在 Column 组件甚至收到它的 ref 之前被调用。

// AppContext
const [columns, setColumns] = useState([]);

const Page = ({children}) => {
    useEffect({
       // This gets called before columns are available
    }, []);

    return (<div className="page">{children}</div>);
}

const View = () => {
    const {columns} = useContext(AppContext);

    return (
        <Page>
            {columns.map(c => <Column>{c}</Column>)}
        </Page>
    );
}

【问题讨论】：

尝试使用useLayoutEffect 而不是useEffect。
谢谢，亲爱的@RA。接受我的回答。我对你的问题表示赞成。我希望它能激励你继续使用 Stack Overflow。另外，我赞成你的其他问题。

标签： javascript reactjs react-hooks react-component

【解决方案1】：

实际上，基于 ReactJS docs 有一个与 useEffect 完全相同的钩子，但它在所有 DOM 突变后调用它的回调，名称为 useLayoutEffect：

签名与useEffect 相同，但它会在所有 DOM 突变后同步触发。使用它从 DOM 中读取布局并同步重新渲染。 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。

我更喜欢使用 useEffect，因为基于 Docs 可能使用 useLayoutEffect 会导致渲染阻塞问题。

对于您的特殊情况，您可以使用 useLayoutEffect。

【讨论】：