假设有一个父组件：
function Parent({ children }) {
useEffet(() => {
// Do something when all children
// have returned their values via props (or context)
})
return <div>{ children }</div>
}
只有在 所有孩子都做完某件事之后，我才能发挥作用吗？我不知道孩子的确切人数，可能会有所不同：
// In this example there are 4 children
function App() {
return (
<Parent>
<Children />
<Children />
<Children />
<div>
<Children />
</div>
</Parent>
);
}
实际的问题是，所有子代都可以准备查询（例如，ElasticSearch查询），而父代负责实际执行整个查询。
好吧，我们可以将孩子们要做的动作包装成一个承诺：
function usePromises() {
const promises = useMemo([], []);
const [result, setResult] = useState(undefined);
useEffect(() => { // this gets deferred after the initialization of all childrens, therefore all promises were created already
Promise.all(promises).then(setResult);
}, []);
function usePromise() {
return useMemo(() => {
let resolve;
promises.push(new Promise(r => resolve = r));
return resolve;
}, []);
}
return [result, usePromise];
}
现在创建一个共享管理器（在父级内部）：
const [queries, useQueryArrived] = usePromises();
// queries is either undefined or an array of queries, if all queries arrived this component will rerender
console.log(queries);
然后传给useQueryArrived孩子们并在孩子们那里使用它：
const queryArrived = useQueryArrived();
// somewhen:
queryArrived({ some: "props" });
现在，逻辑如下：
Parent第一次被渲染，它将创建promises数组。子级将被初始化，并且每个子级都创建一个Promise，该Promise将被附加到promisesPromise的解析器中，从而使每次子重新提交时都将返回相同的解析器。当所有子级都初始化后，React渲染并触发效果，这将接受所有promise并调用Promise.all它们。
现在，当queryArrived在子级中调用某个请求时，这些promise会解决，最后一个promise会解决某个promise，然后调用setResult所有promise的结果，这将导致Parent上的重新呈现，现在可以使用查询。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句