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

React---Hooks深入

backend 2025/6/20 4:02:48

16.1 useEffect

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；

事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
所以对于完成这些功能的Hook被称之为 Effect Hook；

import React, { useState, useEffect } from 'react';function UseEffectDemo() {const [counter, setCounter] = useState(0);useEffect(() => {document.title = "Counter" + counter;});return (<div><h1>Counter: {counter}</h1><button onClick={() => setCounter(counter + 1)}>Increment</button></div>);
}export default UseEffectDemo;

useEffect的清除：

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除：

比如我们之前的事件总线或Redux中手动调用subscribe；
都需要在componentWillUnmount有对应的取消订阅；
Effect Hook通过什么方式来模拟componentWillUnmount呢？

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：
为什么要在 effect 中返回一个函数？
这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；

如此可以将添加和移除订阅的逻辑放在一起；
它们都属于 effect 的一部分；

React 何时清除 effect？

React 会在组件更新和卸载的时候执行清除操作；
正如之前学到的，effect 在每次渲染的时候都会执行；

useEffect实际上有两个参数：

参数一：执行的回调函数；
参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）

16.2 useContext

Context Hook允许我们通过Hook来直接获取某个Context的值；

App.js定义共享

export const userContext = createContext();
export const ThemContext = createContext();

App.js还是需要包裹

function App() {return (<div className="App">{/* <UseCounter /><MoreState /> */}{/* <UseEffectDemo /> */}<userContext.Provider value={{ name: "里斯" }}><ThemContext.Provider value={{ theme: "dark" }}><UserContextDemo /></ThemContext.Provider></userContext.Provider></div>);
}

使用(超简单)

import React, { useContext } from 'react'
import { userContext } from './App'export default function UserContextDemo() {const { name } = useContext(userContext);return <div>用户名：{name}</div>
}

16.3 useReducer

useReducer仅仅是useState的一种替代方案：

在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
或者这次修改的state需要依赖之前的state时，也可以使用；

使用计数来举个例子：

import React, { PureComponent, useReducer } from 'react'// 定义reducer函数，接收state和action，根据action.type返回新的state
function reducer(state, action) {switch (action.type) {case 'INCRESE': // 增加return { count: state.count + 1 };case 'DECRESE': // 减少return { count: state.count - 1 };default:throw new Error(); // 未知action抛出错误}
}export default function UseReducer() {// 定义初始状态const initialState = {count: 0}// useReducer返回当前state和dispatch方法const [state, dispatch] = useReducer(reducer, initialState);return (<div>{/* 显示当前count */}<h2>number{state.count}</h2>{/* 点击按钮派发INCRESE和DECRESE action */}<button onClick={() => dispatch({ type: 'INCRESE' })}> + 1</button><button onClick={() => dispatch({ type: 'DECRESE' })}> - 1</button></div>)
}

16.4 useCallBack

useCallback实际的目的是为了进行性能的优化。
如何进行性能的优化呢？

useCallback会返回一个函数的 memoized（记忆的）值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；

16.5 useMemo

useMemo返回的也是一个 memoized（记忆的）值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；