编辑“︁React Hooks”︁

{{DISPLAYTITLE:React Hooks}}  
'''React Hooks''' 是 React 16.8 引入的一项特性，允许开发者在函数组件中使用状态（state）和其他 React 特性（如生命周期方法），而无需编写类组件。Hooks 提供了一种更简洁、更直观的方式来管理组件逻辑，同时保持代码的可复用性和可维护性。  

== 简介 ==  
在 React 之前，函数组件是无状态的，只能作为“纯函数”使用。如果需要状态或生命周期方法，开发者必须使用类组件。Hooks 的出现改变了这一现状，使得函数组件能够拥有与类组件相同的功能。  

Hooks 的核心思想是：  
* **无需类组件**：直接在函数组件中使用状态和副作用。  
* **逻辑复用**：通过自定义 Hooks 封装和复用组件逻辑。  
* **更清晰的代码结构**：避免类组件中的复杂嵌套和生命周期方法。  

== 基本 Hooks ==  

=== useState ===  
`useState` 是最基础的 Hook，用于在函数组件中添加局部状态。  

<syntaxhighlight lang="javascript">  
import React, { useState } from 'react';  

function Counter() {  
  const [count, setCount] = useState(0); // 初始值为 0  

  return (  
    <div>  
      <p>当前计数: {count}</p>  
      <button onClick={() => setCount(count + 1)}>增加</button>  
    </div>  
  );  
}  
</syntaxhighlight>  

* `count`：当前状态值。  
* `setCount`：更新状态的函数。  

=== useEffect ===  
`useEffect` 用于处理副作用（如数据获取、订阅、手动 DOM 操作等），相当于类组件中的 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount` 的组合。  

<syntaxhighlight lang="javascript">  
import React, { useState, useEffect } from 'react';  

function Timer() {  
  const [seconds, setSeconds] = useState(0);  

  useEffect(() => {  
    const interval = setInterval(() => {  
      setSeconds(prevSeconds => prevSeconds + 1);  
    }, 1000);  

    return () => clearInterval(interval); // 清理函数  
  }, []); // 空依赖数组表示只在组件挂载时执行  

  return <p>已运行: {seconds} 秒</p>;  
}  
</syntaxhighlight>  

* **依赖数组**（第二个参数）：  
  * 空数组 `[]`：仅在组件挂载时运行一次。  
  * 包含变量 `[dep1, dep2]`：当依赖项变化时重新运行。  

== 进阶 Hooks ==  

=== useContext ===  
`useContext` 用于在组件树中共享数据，避免逐层传递 props。  

<syntaxhighlight lang="javascript">  
import React, { useContext } from 'react';  

const ThemeContext = React.createContext('light');  

function ThemedButton() {  
  const theme = useContext(ThemeContext);  
  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>按钮</button>;  
}  
</syntaxhighlight>  

=== useReducer ===  
`useReducer` 是 `useState` 的替代方案，适用于复杂状态逻辑。  

<syntaxhighlight lang="javascript">  
import React, { useReducer } from 'react';  

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, { count: 0 });  

  return (  
    <div>  
      <p>计数: {state.count}</p>  
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>  
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>  
    </div>  
  );  
}  
</syntaxhighlight>  

== 自定义 Hooks ==  
自定义 Hooks 是封装可复用逻辑的函数，命名需以 `use` 开头。  

<syntaxhighlight lang="javascript">  
import { useState, useEffect } from 'react';  

function useFetch(url) {  
  const [data, setData] = useState(null);  

  useEffect(() => {  
    fetch(url)  
      .then(response => response.json())  
      .then(data => setData(data));  
  }, [url]);  

  return data;  
}  

function UserProfile({ userId }) {  
  const user = useFetch(`/api/users/${userId}`);  
  return user ? <div>{user.name}</div> : <div>加载中...</div>;  
}  
</syntaxhighlight>  

== 实际案例 ==  
=== 表单处理 ===  
使用 `useState` 管理表单输入：  

<syntaxhighlight lang="javascript">  
function LoginForm() {  
  const [email, setEmail] = useState('');  
  const [password, setPassword] = useState('');  

  const handleSubmit = (e) => {  
    e.preventDefault();  
    console.log({ email, password });  
  };  

  return (  
    <form onSubmit={handleSubmit}>  
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />  
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />  
      <button type="submit">登录</button>  
    </form>  
  );  
}  
</syntaxhighlight>  

== 性能优化 ==  
=== useMemo 和 useCallback ===  
* `useMemo`：缓存计算结果。  
* `useCallback`：缓存函数。  

<syntaxhighlight lang="javascript">  
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);  
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);  
</syntaxhighlight>  

== 总结 ==  
React Hooks 提供了一种更简洁的方式来编写 React 组件，同时支持逻辑复用和更好的代码组织。以下是关键点：  
* **`useState`**：管理组件状态。  
* **`useEffect`**：处理副作用。  
* **`useContext`**：共享全局数据。  
* **`useReducer`**：复杂状态管理。  
* **自定义 Hooks**：封装可复用逻辑。  

通过合理使用 Hooks，可以显著提升 React 应用的开发效率和可维护性。

[[Category:计算机科学]]
[[Category:面试技巧]]
[[Category:前端框架]]