面试题：React条件渲染与自定义Hooks在大型项目架构中的优化与实践

优化条件渲染性能

Memoization（记忆化）

使用 React.memo 包裹纯展示组件。对于只依赖于 props 的无状态组件，React.memo 会在 props 没有变化时阻止组件重新渲染。例如：

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

对于函数组件中的复杂计算，使用 useMemo 来缓存计算结果。比如，在组件中有一个依赖于多个 props 的复杂数据处理：

const MyComponent = ({ data1, data2 }) => {
  const processedData = useMemo(() => {
    // 复杂的数据处理逻辑
    return data1.filter(item => data2.includes(item));
  }, [data1, data2]);
  return <div>{JSON.stringify(processedData)}</div>;
};

Lazy Loading（懒加载）

对于不经常使用或者在特定条件下才需要渲染的组件，使用 React.lazy 和 Suspense 进行懒加载。例如：

const BigComponent = React.lazy(() => import('./BigComponent'));
const MyApp = () => {
  const [shouldShow, setShouldShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShouldShow(!shouldShow)}>Toggle</button>
      {shouldShow && (
        <Suspense fallback={<div>Loading...</div>}>
          <BigComponent />
        </Suspense>
      )}
    </div>
  );
};

避免不必要的重新渲染

合理拆分组件
- 将大组件拆分成多个小组件，使每个组件的状态和 props 依赖更简单清晰。例如，一个复杂的用户信息展示组件可以拆分成头像组件、基本信息组件、详细信息组件等。
控制状态提升的粒度
- 只将需要共享的状态提升到必要的父组件，避免将过多无关状态提升，导致不必要的重新渲染。比如，一个列表项的展开/收起状态可以在列表项组件内部管理，而列表的整体筛选状态可以提升到列表父组件。

高效管理自定义Hooks之间的依赖关系和状态共享

Hooks设计原则
- 每个自定义 Hook 应该职责单一，专注于解决一个特定的状态管理或副作用问题。例如，一个 useFetch Hook 负责数据获取，一个 useLocalStorage Hook 负责管理本地存储相关的状态。

状态管理库（如 Redux 或 MobX）

Redux：

使用 Redux 可以将共享状态集中管理。定义 actions 来描述状态变化，reducers 来处理状态更新。例如：

// actions.js
const increment = () => ({ type: 'INCREMENT' });
// reducers.js
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};
// store.js
import { createStore } from'redux';
const store = createStore(counterReducer);

在 React 组件中使用 react - redux 的 useSelector 和 useDispatch Hooks 来获取状态和分发 actions。

import { useSelector, useDispatch } from'react - redux';
const MyComponent = () => {
  const count = useSelector(state => state);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};

MobX：

定义 observable 状态和 action 来修改状态。例如：

import { makeObservable, observable, action } from'mobx';
class Counter {
  value = 0;
  constructor() {
    makeObservable(this, {
      value: observable,
      increment: action
    });
  }
  increment() {
    this.value++;
  }
}
const counter = new Counter();

使用 mobx - react 的 observer 函数来包裹组件，使其响应状态变化。

import { observer } from'mobx - react';
const MyComponent = observer(() => {
  return (
    <div>
      <p>Count: {counter.value}</p>
      <button onClick={() => counter.increment()}>Increment</button>
    </div>
  );
});

Context API

对于一些轻量级的状态共享，可以使用 React 的 Context API。创建 Context 对象，在需要共享状态的组件树顶层提供数据，在子组件中消费数据。例如：

const MyContext = React.createContext();
const ParentComponent = () => {
  const [sharedValue, setSharedValue] = useState('default');
  return (
    <MyContext.Provider value={{ sharedValue, setSharedValue }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};
const ChildComponent = () => {
  const { sharedValue, setSharedValue } = useContext(MyContext);
  return (
    <div>
      <p>{sharedValue}</p>
      <button onClick={() => setSharedValue('new value')}>Update</button>
    </div>
  );
};

星途面试题库

面试题：React条件渲染与自定义Hooks在大型项目架构中的优化与实践

知识考点

面试题答案

优化条件渲染性能

避免不必要的重新渲染

高效管理自定义Hooks之间的依赖关系和状态共享