React useState Hook中setSelected通过Dropdown更新状态的实现疑问

1. setSelected的状态变更执行逻辑 #

这段代码并没有绕开setState直接传目标值更新的规则，只是把setSelected的实际调用时机，挪到了子组件的用户交互逻辑里：

• useState(options[0]) 初始化返回的 setSelected 是React原生提供的状态更新函数，本身支持直接接收新的状态值完成更新，没有做任何自定义的二次封装。
• 完整的状态更新触发链路是：
  • Dropdown组件给每个选项DOM节点绑定了点击回调，点击时会执行 onSelectedChange(option)，这里传入的option就是用户点选的对应颜色选项对象，也就是要更新到状态里的目标值。
  • 因为App层传值时直接把setSelected绑定给了onSelectedChange这个prop，用户点击选项触发的回调，就等价于执行了一次 setSelected(用户点选的option对象)，完全符合setState直接传值更新的标准用法，没有特殊的实现。

2. onSelectedChange与setSelected的关系 #

• 从函数引用的角度，onSelectedChange={setSelected} 这种写法，完全等同于把App组件里定义的setSelected函数本身，作为props直接透传给Dropdown组件。Dropdown内部解构拿到的onSelectedChange，和App里的setSelected是同一个内存地址的函数对象，没有任何中间包装层。
• 这个写法就是React里非常经典的跨组件函数传递 + 状态提升的使用场景：
  • 选中颜色的状态selected定义在上层App组件，是需要跨组件共享的全局状态
  • 子组件Dropdown本身不维护选中态，只负责渲染下拉选项的列表、响应用户的点击操作
  • 子组件捕获到用户的选择操作后，通过props拿到父组件传下来的状态更新函数，直接修改父组件的共享状态，触发整个组件树的重渲染，再把最新的选中值通过props传回Dropdown，完成选中标签的界面展示。

常见认知误区：不少开发者会觉得，定义在某组件里的setState，必须在这个组件的代码块里显式写setSelected(xxx)的语句才叫正确用法。实际上React没有限制setState函数的执行位置，只要是持有这个函数引用的代码，都可以在任意时机调用它，只要传入的更新值符合业务逻辑，React就会正常完成状态同步和界面重渲染，不存在任何合规性问题。

内容的提问来源于stack exchange，提问作者leon