这样定义react组件的原因是什么?

Question

我很好奇为什么React不像下面这样定义组件。它必须在第一次调用组件及其返回值，并且要重新呈现，唯一需要做的就是调用返回值，这也是一个函数。不需要props的函数定义在外部函数作用域中，需要的函数定义在内部函数作用域中。

function Component(){
const [count, setCount] = useState(0)
//other states

const incerement = () =>{
setState((oldState) => oldState + 1)
}
// define other functions that do not need props but does state here


return (props) => {
//define the functions that need props here
return (
<div>{count}</div>
<button onClick={increment}>Increment</button>
)
}
}

Answer 1

问得好。

这里最明显的缺点是缺少对useState的后续调用。调用它不仅在第一次调用时设置默认值，而且在每次下一次调用时检索当前值。

在你当前的建议中，内部作用域应该以某种方式获得状态的当前值，但似乎没有办法实现。

无论如何，你的建议似乎不太清楚会有什么改进。它仍然是React调用的一个函数。然而，这种方法的缺点是显而易见的:在第一次调用时，React将不得不调用上层函数和内部函数，然后在随后的调用中只调用内部函数。这意味着React必须以不同的方式处理第一次调用。

React目前所做的是，不管第一个调用和所有其他调用之间的区别，它都以完全相同的方式调用组件。