React 个人笔记 Hooks编程

作用

配合函数式编程，保证在不产生类的时候完成一个整体的组件

常用组件

useState
useContext
useReducer
useEffect
useMemo
useCallback

前三个值为自变量
后三者为因变量

前三者相当于其他编程函数的变量声明，而后三者相当于对变量进行了(if now != previous)的包装，执行函数

useState

适用于：简单逻辑状态管理

//创建
const [state, setState] = useState(defaultState)//直接修改
setState(nextState);
// 函数修改，会接收到一个参数是原先 state 的值，该函数的返回值将作为更新后 state 的值
setState(preState => nextState);

useReducer

用于处理更复杂的状态逻辑。相比于 useState，它更适合用于处理涉及多个子值的状态，或者下一个状态依赖于之前的状态的情况

// 定义初始状态
const initialState = { count: -1 };
//初始化函数
function init(initial) {// 确保初始计数值为正数return { count: Math.abs(initial.count) };
}
// 定义 reducer 函数
function counterReducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };case 'reset':return initialState;default:throw new Error();}
}
}// 在组件中使用
function Counter() {const [state, dispatch] = useReducer(counterReducer, initialState, init);//第三个参数可以传入函数，这个函数允许你自定义初始化逻辑，而不是直接使用第二个参数 initialState作为初始状态（对第二个参数进行预处理，如取abs）。当你需要对初始状态进行一些计算或处理时return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>+1</button><button onClick={() => dispatch({ type: 'decrement' })}>-1</button><button onClick={() => dispatch({ type: 'reset' })}>Reset</button></div>);
}

useContext

和props的区别

Props 是父组件向子组件传递数据的一种方式，从上往下传递，
useContext 是一个 React Hook，允许你订阅 React 的 Context 对象。Context 提供了一种在组件之间共享数据的方式

作用
Props 主要用于父子组件之间的通信，而 useContext 解决了跨层级组件间的数据共享问题。如果组件层次较深，为了将某个 prop 从根组件传递到深层嵌套的组件，可能需要在每一层中间组件中“透传”这个 prop（即使这些中间组件并不使用该 prop），这被称为“prop drilling“ 使用useContext可以避免prop drilling
过度依赖 Context 可能导致不必要的重新渲染，因为它本质上是全局的。而 Props 则更细粒度，仅影响接收它们的组件

使用样例, 文件名为 ThemeContext.js，创造好了context，引用该文件后可以 useContext

import React, { createContext, useState, useContext } from 'react';// 创建 ThemeContext
export const ThemeContext = createContext();// 创建一个提供者组件来包裹需要访问 context 的组件树
export const ThemeProvider = ({ children }) => {const [theme, setTheme] = useState('light'); // 默认主题为 lightconst toggleTheme = () => {setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');};return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>);
};

import React, { useContext } from 'react';
import { ThemeProvider, ThemeContext } from './ThemeContext'; // 假设文件名为 ThemeContext.js
import MiddleComponent from './MiddleComponent';function App() {const { theme, toggleTheme } = useContext(ThemeContext);return (<ThemeProvider><div className={`app ${theme}`}><button onClick={toggleTheme}>Toggle Theme</button><MiddleComponent /></div></ThemeProvider>);
}export default App;

import React from 'react';
import DeeplyNestedComponent from './DeeplyNestedComponent';function MiddleComponent() {return (<div><h2>Middle Component</h2><DeeplyNestedComponent /></div>);
}export default MiddleComponent;

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // 假设文件名为 ThemeContext.jsfunction DeeplyNestedComponent() {const { theme } = useContext(ThemeContext);return (<div className={`deeply-nested-component ${theme}`}><h3>Deeply Nested Component with {theme} theme</h3></div>);
}export default DeeplyNestedComponent;

useEffect

useEffect Hook 让你可以执行副作用操作（如数据获取、订阅或手动 DOM 操作），并根据指定的依赖项数组来决定何时重新执行副作用

无依赖项: 在组件每次渲染后执行。
空数组([]): 仅在组件挂载和卸载时执行
依赖项数组: 当数组中的任何值发生变化时，effect将会重新运行。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {console.log(`You clicked ${count} times`);return () => {// 清理函数console.log('清理工作');};}, [count]); // 只有 count 改变时触发(注意 初始化的时候也会加载一次return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useMemo

useMemo Hook 用于记忆计算结果，避免重复计算。它接收一个创建函数和依赖项数组，只有当依赖项改变时才会重新计算返回值。

import React, { useState, useMemo } from 'react';function computeExpensiveValue(a, b) {console.log("Performing expensive computation...");return a + b;
}function Example({ a, b }) {const [count, setCount] = useState(0);const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);return (<><p>Memoized Value: {memoizedValue}</p><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increase Count</button></>);
}

useCallBack

seCallback Hook 与 useMemo 类似，用于记忆函数定义。优化性能，特别是当将回调函数作为 props 传递给子组件时，可以防止子组件重新渲染。

import React, { useState, useCallback } from 'react';function ChildComponent({ onButtonClick }) {console.log("ChildComponent render");return <button onClick={onButtonClick}>Click Me!</button>;//即使父组件渲染，ChildComponent 接收到的 onButtonClick 回调不会改变， Click me Button不会重新渲染
}function ParentComponent() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {console.log("Button clicked");}, []); // 空数组意味着这个回调永远不会更新return (<><ChildComponent onButtonClick={handleClick} /><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increase Count</button></>);
}