React 个人笔记 Hooks编程

作用

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

常用组件

1. useState
2. useContext
3. useReducer
4. useEffect
5. useMemo
6. 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的区别

1. Props 是父组件向子组件传递数据的一种方式，从上往下传递，
2. 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'); // 默认主题为 light

    const 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.js

function 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 操作），并根据指定的依赖项数组来决定何时重新执行副作用

1. 无依赖项: 在组件每次渲染后执行。
2. 空数组([]): 仅在组件挂载和卸载时执行
3. 依赖项数组: 当数组中的任何值发生变化时，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>
        </>
    );
}