当前位置：首页 > news >正文

React Hooks 中的属性详解

news 2025/7/19 3:01:19

React Hooks 是 React 16.8 版本中新增的特性，允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks，并附有详细的用法和代码示例。

1. useState

useState 是一个 Hook 函数，让我们在 React 函数组件中添加局部 state，而不必将它们修改为 class 组件。

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在这里，useState 是一个函数，它接收初始 state 作为参数，返回一个数组，其中第一个元素是当前的 state，第二个元素是一个更新 state 的函数。

2. useEffect

useEffect Hook 可以让你在函数组件中执行副作用操作。数据获取、订阅或者手动修改 DOM 都属于副作用。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在这个示例中，我们在组件渲染后设置了 document 的 title。我们传递给 useEffect 的函数会在每次渲染后都执行。如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

3. useContext

useContext Hook使你可以订阅 React 的 Context 而不必明确的在组件树中间传递 props。

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');function ThemedButton() {const theme = useContext(ThemeContext);return <button theme={theme}>I am styled by theme context!</button>;
}

在这个示例中，我们使用 useContext Hook 订阅了 ThemeContext，并将其值赋给 theme 变量。当 ThemeContext 更新时，组件会重新渲染，并使用最新的 context 值。

4. useReducer

useReducer 是另一个可以在函数组件中保存 state 的 Hook，但它更适用于有复杂 state 逻辑的组件，它接受一个 reducer 函数和初始 state 作为参数，返回当前的 state 以及与其配套的 dispatch 方法。

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: 'increment'})}>+1</button><button onClick={() => dispatch({type: 'decrement'})}>-1</button></>);
}

在这个示例中，我们使用 useReducer 来处理 state 的更新逻辑。我们传递给 useReducer 的 reducer 函数会在每次 dispatch 时被调用。

5. useCallback

useCallback 返回一个记忆化版本的回调函数，它仅在依赖项改变时才会更新。当你将回调传递给被优化的子组件时，它可以防止因为父组件渲染而无谓的渲染子组件。

import React, { useState, useCallback } from "react";function App() {const [count, setCount] = useState(0);const increment = useCallback(() => {setCount(count + 1);}, [count]);return (<div>Count: {count}<Button onClick={increment}>Increment</Button></div>);
}function Button({ onClick, children }) {console.log("Button re-rendered");return (<button onClick={onClick}>{children}</button>);
}

在这个示例中，我们通过 useCallback 创建了一个只有当 count 改变时才会更新的 increment 函数。这样，只有当 increment 函数改变时，Button 组件才会重新渲染。

6. useMemo

useMemo 返回一个记忆化的值。它仅在某个依赖项改变时才重新计算 memoized 值。这用于优化性能，避免在每次渲染时都进行高开销的计算。

import React, { useMemo } from "react";function MyComponent({ list }) {const processedData = useMemo(() => {return processData(list);}, [list]);return <OtherComponent data={processedData} />;
}