面试题：React自定义Hooks与组件性能优化及状态管理架构的融合

优化组件渲染性能

使用 React.memo：
- 原理：React.memo 是一个高阶组件，它通过浅比较 props 来决定是否跳过组件的渲染。如果组件的 props 没有变化，React.memo 会复用之前的渲染结果，从而避免不必要的渲染。
- 示例：

import React from'react';

const MyComponent = React.memo((props) => {
    return <div>{props.value}</div>;
});

export default MyComponent;

自定义 Hooks 中的性能优化：
- 减少不必要的依赖：在自定义 Hooks 中，使用 useEffect、useCallback 和 useMemo 时，要准确设置依赖数组。避免依赖过多导致不必要的重新计算。
- 示例 - useEffect：

import { useState, useEffect } from'react';

const useMyCustomHook = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        // 这里只依赖 count，当 count 变化时才执行此 effect
        document.title = `Count: ${count}`;
    }, [count]);
    return { count, setCount };
};

export default useMyCustomHook;

示例 - useCallback：

import { useState, useCallback } from'react';

const useMyCustomHook = () => {
    const [count, setCount] = useState(0);
    const increment = useCallback(() => {
        setCount(count + 1);
    }, [count]);
    return { count, increment };
};

export default useMyCustomHook;

示例 - useMemo：

import { useState, useMemo } from'react';

const useMyCustomHook = () => {
    const [count, setCount] = useState(0);
    const expensiveValue = useMemo(() => {
        // 复杂计算，只有 count 变化时才重新计算
        return count * count * count;
    }, [count]);
    return { count, expensiveValue };
};

export default useMyCustomHook;

其他性能优化手段：
- 代码拆分：使用动态 import() 来实现代码拆分，将大组件拆分成多个小的代码块，按需加载，减少初始加载时间。
- 虚拟列表：对于大量数据的列表，使用虚拟列表库（如 react - virtualized 或 react - window），只渲染可见部分的列表项，提高性能。

自定义 Hooks 与状态管理库协同工作

与 Redux 协同工作：
- 设计思路：
  - 自定义 Hooks 可以封装 Redux 的部分逻辑，如获取数据、分发 action 等。通过 useSelector 和 useDispatch 来连接 Redux 状态和 action。
  - 将相似的 Redux 操作抽象到自定义 Hooks 中，提高代码复用性。
- 关键代码示例：

import { useSelector, useDispatch } from'react-redux';
import { increment, decrement } from './counterActions';

const useCounter = () => {
    const count = useSelector(state => state.counter.value);
    const dispatch = useDispatch();
    const incrementCount = () => dispatch(increment());
    const decrementCount = () => dispatch(decrement());
    return { count, incrementCount, decrementCount };
};

export default useCounter;

与 MobX 协同工作：
- 设计思路：
  - 使用 MobX 的 observer 高阶组件结合自定义 Hooks。自定义 Hooks 可以获取 MobX 的 observable 数据，并提供更新数据的方法。
  - 利用 MobX 的响应式编程特性，在自定义 Hooks 中处理业务逻辑，使得状态变化能自动更新组件。
- 关键代码示例：

import { makeObservable, observable, action } from'mobx';
import { observer } from'mobx - react - lite';
import { useState, useEffect } from'react';

class CounterStore {
    constructor() {
        this.count = 0;
        makeObservable(this, {
            count: observable,
            increment: action,
            decrement: action
        });
    }
    increment() {
        this.count++;
    }
    decrement() {
        this.count--;
    }
}

const counterStore = new CounterStore();

const useCounter = () => {
    const [, forceUpdate] = useState();
    useEffect(() => {
        counterStore.onDidChange(() => forceUpdate({}));
        return () => counterStore.offDidChange(() => forceUpdate({}));
    }, []);
    return {
        count: counterStore.count,
        increment: counterStore.increment,
        decrement: counterStore.decrement
    };
};

const MyCounterComponent = observer(() => {
    const { count, increment, decrement } = useCounter();
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
});

export default MyCounterComponent;

星途面试题库

面试题：React自定义Hooks与组件性能优化及状态管理架构的融合

知识考点

面试题答案

优化组件渲染性能

自定义 Hooks 与状态管理库协同工作