React自定义Hook能否返回useState的setValue方法？调用是否合法？

问题1：若自定义Hook使用React.useState，能否返回该状态对应的setValue方法？ #

当然可以，这是自定义Hook的常规用法。自定义Hook的核心就是封装可复用的状态逻辑，把状态值和对应的修改方法一起返回，能让调用它的组件方便地使用和更新这个状态。

问题2：React文档规定状态单向流动，组件能否通过自定义Hook返回的函数修改其内部状态？ #

完全可以，这并没有打破单向数据流原则。这里的状态本质上还是由自定义Hook管理的，组件只是通过Hook提供的setValue方法触发状态更新，状态更新后再反馈给组件完成渲染。整个流程是：组件触发修改方法 → Hook内部状态更新 → 状态返回给组件渲染，完全符合“数据从上到下流动，修改动作从下到上触发”的单向逻辑。

示例代码合法性判断 #

看你给出的示例代码：

const useCustomHook = () => {
  const [value, setValue] = React.useState(false);
  return {
    value,
    setValue
  }
}

const ComponentX = () => {
  const { value, setValue } = useCustomHook()

  return(
    <Button onPress={() => setValue('xyz')}/>
  )
}

ComponentX调用返回的setValue是完全合法且符合React规范的。这种写法在实际开发中非常普遍，比如封装表单输入、开关状态这类自定义Hook时，都会采用这种方式把状态和修改能力暴露给组件。

内容的提问来源于stack exchange，提问作者Obay Abd-Algader