我如何等待带有React钩子的子组件准备就绪？

Question

所以我有一个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>
    );
}

Answer 1

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

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

我更喜欢使用useEffect，因为基于文档，也许使用useLayoutEffect会导致渲染阻塞问题。

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