React Hooks 使用指南

React Hooks 是 React 16.8 引入的一种新特性，允许在函数组件中使用状态和其他 React 特性，而无需编写类组件。以下是一些基础的 Hooks 及其使用规则。

常用 Hooks

1. useState
   用于在函数组件中添加状态。

   import React, { useState } from 'react';
   
   function Counter() {
       const [count, setCount] = useState(0);
       return (
           <div>
               <p>Count: {count}</p>
               <button onClick={() => setCount(count + 1)}>Increment</button>
           </div>
       );
   }
   

2. useEffect
   处理副作用（如数据获取、订阅等）。

   import React, { useState, useEffect } from 'react';
   
   function DataFetchingComponent() {
       const [data, setData] = useState([]);
   
       useEffect(() => {
           fetch('https://api.example.com/data')
               .then(response => response.json())
               .then(data => setData(data));
       }, []);
   
       return (
           <div>
               {data.map(item => (
                   <div key={item.id}>{item.name}</div>
               ))}
           </div>
       );
   }
   

3. useContext
   共享数据的上下文。

   import React, { createContext, useContext } from 'react';
   
   const MyContext = createContext();
   
   function MyComponent() {
       const value = useContext(MyContext);
       return <div>{value}</div>;
   }
   
   function App() {
       return (
           <MyContext.Provider value="Hello, World!">
               <MyComponent />
           </MyContext.Provider>
       );
   }
   

4. 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 (
           <div>
               Count: {state.count}
               <button onClick={() => dispatch({ type: 'increment' })}>+</button>
               <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
           </div>
       );
   }
   

5. 自定义 Hook
   创建可复用的逻辑。

   import { useState, useEffect } from 'react';
   
   function useFetch(url) {
       const [data, setData] = useState(null);
       const [loading, setLoading] = useState(true);
   
       useEffect(() => {
           fetch(url)
               .then(response => response.json())
               .then(data => {
                   setData(data);
                   setLoading(false);
               });
       }, [url]);
   
       return { data, loading };
   }
   

使用规则

1. 只能在函数组件或自定义 Hook 中调用：避免在常规 JavaScript 函数中使用。

2. 必须在顶层调用：避免在循环、条件语句或嵌套函数中调用，确保每次渲染都以相同的顺序调用 Hooks。

3. 依赖数组：在 useEffect 和其他 Hooks 中，依赖数组用于控制副作用的执行时机，确保正确管理状态和性能。

小结

理解和掌握这些 Hooks 及其使用规则是使用 React 的重要基础，可以使函数组件变得更加强大和灵活。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。