在React中更新事件：顺序？

Question

假设我有这样的事情，其中两个组件A，并D听取在全球存储器的变化：

import React from 'react'
import useStore from 'whatever-global-store-manager'

function A() {
  const [store] = useStore()
  if(!store.currentUser)
    return <h1>You must log in</h1>
  else return <B/>
}

function B() {
  return <C/>
}

function C() {
  return <D/>
}

function D() {
  const [store] = useStore()
  console.log(store.currentUser) // Can it be falsey ?
  return <h1>{store.currentUser.name}</h1>
}

在中A，当currentUser为false时，B不呈现，因此D不呈现。但是假设这种情况：

• 首先，currentUser被定义为具有name属性的对象，因此进行D渲染，侦听商店中的更改并渲染name。
• 然后，将应用程序中的其他currentUser位置设置为null。

“侦听器”按什么顺序处理？是否有功能d执行任何机会与currentUser到null即使开始最终从组件树中删除？

提出问题的另一种方式：在访问currentUser组件D的name属性之前，我应该检查一下组件吗？

我在文档中寻找类似这样的规则：“当两个组件侦听同一事件时，将首先呈现层次结构中较高的一个，如果事实证明应根据第一个的输出卸载第二个，则第二个甚至都没有被召唤”，但找不到任何东西。在实践中，我知道它是可行的，但我想确保这不只是运气。

Answer 1

我相信这很大程度上取决于商店观察者机制，因此在不知道您正在使用哪个商店的情况下很难给出结论性的答案。如果观察者按顺序注册，这可能会影响您需要如何处理它。

如果您想确定，您可以使用console.log渲染方法，或者debugger在更改 的值时使用currentUser。

假设实现的分析：假设观察者在组件安装时注册，在组件卸载时取消注册。在这种情况下，组件 A 将首先触发（因为它首先注册），并导致 D 卸载，取消注册其触发器。在这个假设的场景中，D 不需要检查 null。

未经请求的建议：对您来说一件好事可能是将“数据收集”集中在一个父组件中，而子组件只是将其作为道具接收并渲染（而不观察存储）。我发现（从传说和个人经验来看）它大大简化了开发过程。