面试题：React 表单性能优化与自定义 Hooks 的深度结合

可能导致性能问题的原因

频繁的状态更新：在用户频繁输入时，自定义 Hooks 中管理的状态频繁更新，触发不必要的重新渲染，因为 React 默认只要组件的状态或 props 发生变化，组件就会重新渲染。
没有缓存函数：自定义 Hooks 中返回的函数没有使用 useCallback 进行缓存，每次渲染时都会生成新的函数实例，这可能导致依赖这些函数的子组件不必要的重新渲染。
子组件不必要渲染：即使表单中的某些子组件的 props 没有变化，由于父组件重新渲染，它们也会跟着重新渲染。

优化方案

使用 useCallback 缓存函数：在自定义 Hooks 中，对于那些作为 props 传递给子组件的函数，使用 useCallback 进行缓存，避免每次渲染都创建新的函数实例。
使用 memo 包裹子组件：对于那些只要 props 不变就不需要重新渲染的子组件，使用 React.memo 进行包裹，这样当父组件重新渲染时，如果传递给这些子组件的 props 没有变化，子组件不会重新渲染。
批量更新状态：利用 useReducer 结合 useEffect 进行批量状态更新，而不是每次输入都单独更新状态，减少不必要的重新渲染。

关键代码示例

自定义 Hooks 优化

import { useState, useCallback } from'react';

// 自定义 Hooks
const useForm = () => {
  const [formData, setFormData] = useState({});

  const handleChange = useCallback((e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({...prevData, [name]: value }));
  }, []);

  return { formData, handleChange };
};

使用 memo 包裹子组件

import React from'react';

const InputField = React.memo(({ name, value, onChange }) => {
  return <input type="text" name={name} value={value} onChange={onChange} />;
});

const FormComponent = () => {
  const { formData, handleChange } = useForm();

  return (
    <form>
      <InputField name="username" value={formData.username || ''} onChange={handleChange} />
      <InputField name="email" value={formData.email || ''} onChange={handleChange} />
    </form>
  );
};

使用 useReducer 进行批量更新（示例）

import { useReducer } from'react';

// 定义 reducer
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {...state, [action.name]: action.value };
    default:
      return state;
  }
};

const UseReducerForm = () => {
  const [formData, dispatch] = useReducer(formReducer, {});

  const handleChange = (e) => {
    const { name, value } = e.target;
    dispatch({ type: 'UPDATE_FIELD', name, value });
  };

  return (
    <form>
      <input type="text" name="username" value={formData.username || ''} onChange={handleChange} />
      <input type="text" name="email" value={formData.email || ''} onChange={handleChange} />
    </form>
  );
};

面试题：React 表单性能优化与自定义 Hooks 的深度结合

知识考点

面试题答案

可能导致性能问题的原因

优化方案

关键代码示例