我有一个有趣的用例，用于存储对属于子组件的函数的引用。另外，我使用React的新上下文API将数据传递给深层嵌套的子组件。
我找到了许多解决类似问题的其他答案，但它们与我的用例完全不符。请参阅here和here。
这是高级问题：
Provider的{{1}}组件包含传递给<Parent />所有<Child />组件的逻辑和状态。Consumers个组件会收到一个Child道具，它实际上是该特定verify的各种类型的验证函数。每次调用Child都会根据来自verify的状态变化生成verificationResult。Parent组件或了解其兄弟姐妹生成的每个Child的结果。verificationResult存储在父母的状态中，如果我不需要，因为它本质上是派生状态，并且可以在verificationResult Parent中计算。解决方案1：
将每个孩子的render()存储在verificationResult中。这可以通过等待每个Parent Child中的相关值进行更改来完成，如下所示：
componentDidUpdate()注意：
// Child.js
...
componentDidUpdate(pp) {
const { hash, value, verify, setVerificationResult } = this.props
// this check is a little more involved but
// the next line captures the gist of it.
if(pp.value[pp.hash] !== value[hash]) {
setVerificationResult(hash, verify(value[hash], value))
}
}
...
// Parent.js
...
setVerificationResult(hash, result) {
this.setState(({ verificationResults }) => ({
...verificationResults, [hash]: result
}))
}
...
和this.props.value是从this.props.setVerificationResult收到的，这是一个上下文Parent，而
Provider和this.props.hash会直接传递给this.props.verify组件。
Child抓取this.props.hash此特定value需要了解的部分。
Child解决方案1符合反应鼓励的单向数据流原则。但是我对此解决方案有2个问题。首先，我必须存储可以导出的本质状态。其次，调用// MyComponent.js
render() {
return (
...
<Child
hash="someHash"
verify={(value, allValues) => {
return value === 42 && allValues["anotherHash"] === 42
}}
render={({ verificationResults }) => (
<pre>{JSON.stringify(verificationResults["someHash"], null, ' ')}</pre>
)}
/>
...
)
会导致不必要的重新渲染。更不用说setVerificationResult()
解决方案2
接下来的选项看起来像这样。请注意，我尝试过只显示重要位：
componentDidUpdate请注意，在第二个解决方案中，我没有存储任何其他状态，因为它刚刚计算出来。但是我存储对子组件的函数的引用。
有谁可以告诉我为什么不使用解决方案2？关于如何使这项工作的任何其他建议？
附加说明：