钩子是对变量的复杂回答吗？

Question

我们使用像

useState()

这样的钩子来存储一些状态而不是普通变量，因为我们希望 UI 能够正确更新。但这不正是 React 提出的过于复杂状态的解决方案吗？相反，我们可以通过更新变量来实现吗？

useState()

和

useRef()

就是为了这个目的，那么 hooks 的用途还不止于此，它们实际上解决了什么问题？

Answer 1

不。钩子的存在是有原因的。在您的示例中

useState

会保存给定的状态，即使组件可能会渲染多次，并且如果状态发生更改，组件也会更新。

想象一下这两个函数：

const ComponentA = () => {

    let i = 0;

    return <div>
        <p>{i}</p>
        <button onClick={() =>i++}>Increment</button>
    </div>
}


const ComponentB = () => {

    const [i, setI] = useState(0);

    return <div>
        <p>{i}</p>
        <button onClick={() => setI(i+1)}>Increment</button>
    </div>
}


const Parent = () => {
    return <>
        
        <ComponentA />
        <ComponentB />
        
        </>
}

当您单击

ComponentA

中的按钮时，组件将不会更新。它会留下来

<p>0</p>

。它不会更新 DOM。 另一方面，

ComponentB

将重新渲染组件。

第二期如下；如果

Parent

更新，

i

中的

ComponentA

将被 reset，因为它只是执行函数指示的操作。

ComponentB

，该状态将在后台保持。因此，如果您更新

ComponentB

，它将保留信息。

您显然仍然可以使用普通变量。例如。当您有不会对性能造成太大影响的列表或简单计算时：

const ComponentA = ({list}) => {

    let i = list.length;

    return <div>
        <p>{i}</p>
    </div>
}

但是，正如我所解释的，这些对于保持某种状态来说是错误的选择。