为什么不在react中同时返回state和child ?

Question

这段代码似乎可以工作。没人会这么做。它到底有什么问题?在什么条件下会产生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:扩展示例

Answer 1

无。这完全没问题。它甚至有一个名字，自定义钩子: https://reactjs.org/docs/hooks-custom.html

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

Answer 2

不是直接使用state，为什么要从函数调用中获得它?为什么不能直接在组件中创建它呢?这样更容易读懂。并保持这个完整的部分<button onClick={()=>setN(n=>n+1)}>Increment</button>在组件中，而不是它给出的方式。最好以一种更易读的方式编写代码。否则，当涉及到更大的组件时，它会变得太复杂。