为什么不在反应中一起返回状态和孩子呢？答案

【问题标题】：Why not return state and child together in react?为什么不在反应中一起返回状态和孩子呢？
【发布时间】：2021-11-19 02:31:40
【问题描述】：

此代码似乎有效。没有人这样做。它到底有什么问题？什么情况下会产生bug？

function App(){
    const [b1, n1] = button()
    const [b2, n2] = button()
    const [input1, text] = input()
    return <div>
      <div>Total: {n1}+{n2}={n1+n2}. That's {text}.</div>
      <div>{b1} {b2} {input1}</div>
      </div>;
}

function button() {
  const [n, setN] = React.useState(0)
  const b = <button onClick={()=>setN(n=>n+1)}>Increment</button>
  return [b, n]
}

function input() {
  const [t, setT] = React.useState("okay")
  const i = <input type="text" value={t} onChange={e=>setT(e.target.value)}/>
  return [i, t]
}

https://jscomplete.com/playground/s752284

很整洁，如果可以的话我想用一下。

编辑澄清：假设您需要将状态从子组件提升到父组件。有很多方法。向下传递ref，向下传递setState，向下传递dispatch，等等。这种方法不需要任何向下传递，只需向上传递。由于某种原因，自定义钩子通常不会返回 JSX。这种模式有什么隐藏的问题吗？

编辑 2：扩展示例

【问题讨论】：

相关：stackoverflow.com/questions/62186513/…。区别在于你返回的是哪种 JSX。
澄清上述观点：基本上要注意返回反应元素（jsx）之间的区别，这很好，返回反应组件，不是。在 OP 提供的示例中，他们正在返回一个元素，这是可以接受的。
谢谢。我的理解是，您基本上永远不想在任何组件或效果的主体中定义组件（即返回 JSX 的函数）。

标签： reactjs state use-state

【解决方案1】：

您为什么不直接使用state，而是尝试从函数调用中获取它？为什么你不能直接在你的组件中创建它，它真的更具可读性。并将这个完整的部分 <button onClick={()=>setN(n=>n+1)}>Increment</button> 保留在组件中，而不是按照它给出的方式。最好以更易读的方式编写代码。否则，当涉及到更大的组件时，它会变得过于复杂。

【讨论】：

假设一个表单有十个输入和按钮。将整个表单保存在父级中并传递 setter 对我来说似乎比让孩子返回自己的状态更混乱。请参阅上面的编辑。

【解决方案2】：

没有。完全没问题。它甚至还有一个名字，custom hooks：https://reactjs.org/docs/hooks-custom.html

其中一个约定是以use 开头的名称。这也意味着您需要遵循与钩子相关的所有规则。此处的文档：https://reactjs.org/docs/hooks-intro.html

【讨论】：

我从未见过自定义钩子返回 JSX 元素。我想不出它有什么问题，所以我想是有原因的，因为它对文本字段和复选框之类的东西很有用。
为什么不呢？ JSX 只是一个对象。事实上，我敢打赌你已经使用了一个库来做到这一点。 github.com/remix-run/react-router/blob/dev/packages/… 很好，真的。
从技术上讲，他们仍然只返回元素！不过，我会继续使用这种模式。谢谢！