React Hooks 初学者指南以及如何使用它们

什么是 React Hooks，它们为什么有用？

React Hooks 是 React 16.8 中的一项新功能，它允许您在不编写类的情况下使用状态和其他 React 功能。这使得在组件之间共享有状态逻辑变得容易，并有助于使您的代码更具可重用性和更易于理解。钩子也很有用，因为它们允许您将代码拆分成更小的、可重用的部分，这可以使其更易于管理和测试。

React Hooks 和基于类的组件之间的区别

React Hooks 和基于类的组件之间的一些主要区别包括：

1. Hooks 允许您在函数组件中使用状态和其他 React 功能：在引入 Hooks 之前，只有基于类的组件才能拥有状态并使用其他 React 功能，例如生命周期方法。使用 Hooks，您可以将状态和其他 React 特性添加到函数组件中，使它们更加通用和可重用。

   
   

2. 钩子使您的代码更简洁和可读：基于类的组件可能变得又长又复杂，尤其是当您必须管理大量状态或生命周期方法时。使用 Hooks，您可以使用简单、集中的函数来处理各个状态和逻辑片段，这可以使您的代码更具可读性和更容易理解。

   
   

3. Hooks 允许您重用有状态的逻辑：使用 Hooks，您可以从一个组件中提取有状态的逻辑并在多个组件之间共享它，使您的代码更易于重用和维护。如果您有一个包含大量有状态逻辑的复杂组件，并且想要将其中的一些逻辑提取到可重用的函数中，这将特别有用。

基本反应挂钩

使用状态()

useState 钩子是 React 中的一个函数，它允许您向功能组件添加状态。状态是确定组件行为并向用户呈现信息的值的集合。 useState 钩子接受一个参数，即初始状态并返回一个包含两个元素的数组。

第一个元素是状态的当前值，第二个元素是可用于更新状态的函数。下面是一个示例，说明如何在功能组件中使用 useState 挂钩：

 import React, { useState } from 'react'; const myComponent = () => { // Declare a new state variable, which we'll call "count" // The initial value of count is 0 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times.</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

在本例中，useState 钩子用于向 MyComponent 功能组件添加一个名为 count 的状态。 count的初始值为0，setCount函数用于在点击按钮时更新count的值。每次单击按钮时，count 的值将增加 1，组件将使用更新后的值重新渲染。

使用效果()

useEffect 是 React 中的一个钩子，允许您在函数组件中执行副作用。这可能包括设置订阅、修改 DOM 以及与外部 API 交互等内容。

它在组件内部调用，每次组件渲染时都会运行。

以下是如何使用它的示例：

 import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // Perform some side effect, like subscribing to a data source const subscription = someDataSource.subscribe(data => { // Update state with the data from the subscription setState({ data }); }); // Clean up the subscription when the component unmounts return () => subscription.unsubscribe(); }); // Render the component return ( <div> {/* Use the data from the state in the render method */} Data: {state.data} </div> ); }

在此示例中，useEffect 挂钩用于设置对数据源的订阅并使用来自订阅的数据更新组件的状态。它还包括一个清理函数，该函数将在组件卸载时调用，以确保正确清理订阅并且不会导致内存泄漏。

使用上下文()

useContext 是 React 中的一个钩子，它允许您从函数组件中访问上下文的值。 Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。

以下是如何使用 useContext 的示例：

 import React, { useContext } from 'react'; // Create a context with a default value const MyContext = React.createContext('defaultValue'); function MyComponent() { // Use the useContext hook to access the value of the context const value = useContext(MyContext); return ( <div> {/* Use the value from the context in the render method */} Value from context: {value} </div> ); }

在此示例中，useContext 挂钩用于访问 MyComponent 函数组件中 MyContext 上下文的值。然后可以在 render 方法中使用上下文的值。

重要的是要注意，如果更新提供上下文值的提供程序，则上下文的值只会在使用上下文的组件中更新。这意味着如果使用更新后的值重新呈现提供程序，则对上下文值的任何更改只会反映在使用上下文的组件中。

高级反应挂钩

使用Reducer()

useReducer 是 React 中的一个钩子，用于管理 React 应用程序中的状态。它类似于 useState 钩子，但它允许您管理更复杂的状态对象，并提供了一种在 reducer 函数中处理操作的方法。

这是一个如何在 React 组件中使用 useReducer 的示例：

 import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'decrement' })}>-</button> <button onClick={() => dispatch({ type: 'increment' })}>+</button> </> ); }

在此示例中，useReducer 挂钩用于管理简单计数器组件的状态。挂钩使用 reducer 函数和初始状态调用，它返回当前状态和可用于将操作分派给 reducer 的分派函数。在这种情况下，该组件有两个按钮，它们将“递增”和“递减”操作分派给缩减器，缩减器相应地更新状态中的计数。

使用备忘录()

useMemo 是 React 中的一个钩子，允许您通过记忆其结果来优化组件的性能。它以一个函数和一个依赖项数组作为参数，并返回函数的记忆结果。

记忆只是一种优化技术，用于提高应用程序的速度和效率。它通过存储计算结果并在相同输入再次出现时返回缓存的结果来实现这一点。

依赖项数组告诉 React 何时重新运行记忆函数。每当数组中的一个依赖项发生变化时，记忆函数将重新运行。这对于优化大型或复杂组件的性能很有用，因为每次组件渲染时重新计算函数的结果可能代价高昂。

使用引用()

在 React 中，useRef 钩子用于创建对 DOM 元素或 React 组件实例的引用。然后可以使用此引用来访问元素的属性，例如它的值或选中状态，或调用元素上的函数，例如焦点或单击。

下面是一个例子，说明如何在单击按钮时使用 useRef 来聚焦输入元素：

 import { useRef } from 'react'; function MyInput() { const inputRef = useRef(null); function handleClick() { // Use the `current` property of the ref to access the DOM element inputRef.current.focus(); } return ( <div> <input type="text" ref={inputRef} /> <button onClick={handleClick}>Focus the input</button> </div> ); }

在此示例中，通过调用 useRef 并将 null 作为 ref 的初始值传递来创建 inputRef 变量。然后通过将 ref 属性设置为 inputRef 将此 ref 附加到 input 元素。

调用 handleClick 函数时，它使用当前属性 inputRef 访问输入元素并调用其焦点方法，该方法将焦点移动到输入元素。

请注意，不应使用 useRef 在组件中存储状态。相反，为此目的使用 useState 钩子。 useRef 用于存储对非 React 值的引用，例如 DOM 元素。

React Hooks 的常见用例

• 管理简单和复杂组件的状态
• 执行 API 调用和订阅等副作用
• 通过记忆优化性能
• 创建对用于动画和交互的元素的引用

结论

总之，与传统的基于类的组件相比，React Hooks 提供了几个好处。例如简单性、可重用性、可组合性（即将多个逻辑片段组合成单个函数的能力）和改进的性能。

我建议您熟悉 React Hooks 的基础知识，并尝试在您的下一个项目中应用它们。