React是一款流行的JavaScript库，用于构建用户界面。在React 16.8版本中引入了Hooks，它是一种新的React功能，可以让我们在无需编写类组件的情况下使用状态和其他React特性。
为什么需要Hooks？
在React之前，我们可以通过编写类组件来实现状态和其他特性。但是，这些类组件可能会变得非常复杂，尤其是当它们包含多个生命周期方法和状态时。此外，这些类组件也难以重用和测试。
React Hooks的目的是解决这些问题。通过使用Hooks，我们可以在函数式组件中管理状态和其他React特性，从而使代码更简单、易于理解、可重用和可测试。
常见的Hooks
useState
useState Hook是最常见的一个Hook之一，它允许我们在函数式组件中使用状态。例如，以下代码使用useState来跟踪一个计数器的值：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- -------- --------- - ----- ------- --------- - ------------ ------ - ----- --------- ----------- ------- ----------- -- -------------- - ---------------------- ------ -- -展开代码
在上面的代码中，我们使用useState来声明一个名为count的状态，并将其初始值设置为0。然后，我们在渲染函数中使用count来显示当前计数器的值，并使用setCount函数来更新状态。
useEffect
useEffect Hook是另一个常见的Hook，它允许我们在组件渲染后执行副作用。例如，以下代码使用useEffect来订阅和取消订阅窗口大小事件：
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- -------- -------- ------------ - ----- ------- --------- - ---------------------------- ------------ -- - -------- -------------- - ---------------------------- - --------------------------------- -------------- ------ -- -- - ------------------------------------ -------------- -- -- ---- ------ - ----- --------- ------ ------------- ------ -- -展开代码
在上面的代码中，我们使用useState来声明一个名为width的状态，并将其初始值设置为window.innerWidth。然后，我们使用useEffect来添加和删除窗口大小事件的侦听器，并在窗口大小更改时更新状态。
useContext
useContext Hook允许我们在组件之间共享数据。例如，以下代码使用useContext来共享当前用户信息：
-- -------------------- ---- ------- ------ ------ - -------------- ---------- - ---- -------- ----- ----------- - ---------------- -------- ----- - ------ - --------------------- -------- ----- ------- --- ------------ -- ----------------------- -- - -------- ------------- - ----- ---- - ------------------------ ------ - ----- -------- --------------- ------ -- -展开代码
在上面的代码中，我们使用createContext来创建一个名为UserContext的上下文。然后，在App组件中，我们将当前用户信息作为值传递给UserContext.Provider。最后，在UserProfile组件中，我们使用useContext来获取当前用户信息。
如何编写自定义Hooks
除了使用React提供的Hooks之外，我们还可以编写自己的自定义Hooks。这些Hooks可以帮助我们在不同的组件中共享逻辑或状态，从而使代码更加模块化和可重用。
例如，以下是一个使用useState和useEffect Hook编写的自定义计时器Hook：
-- -------------------- ---- ------- ------ - --------- --------- - ---- -------- -------- ------------------ - ----- ------ -------- - ------------ ------------ -- - ----- ------- - -------------- -- - ------------ -- ---- - ---------- -- ---------- ------ -- -- - ----------------------- -- -- ------------ ------ ----- -展开代码
在上面的代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44512
