如何避免React输入框按键时触发组件不必要重渲染？

问题根源分析 #

1. 每次输入时，handleInputChange中先后调用setInputValue和setError，两次状态更新触发两次重渲染；
2. 回调函数（handleInputChange、handleInputBlur等）每次渲染都会重新创建，导致子组件因props引用变化触发不必要重渲染；
3. 整个表单作为单一组件，任何输入项变化都会触发全组件重渲染，粒度太粗。

具体优化方案 #

1. 合并状态更新，减少重渲染次数 #

将输入值和错误信息合并为单一状态，或使用useReducer管理表单状态，一次操作仅触发一次重渲染。

示例：用useReducer重构状态

import React, { useReducer } from 'react';

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_INPUT':
      return {
        ...state,
        inputValue: { ...state.inputValue, [action.name]: action.value },
        error: { ...state.error, [action.name]: action.payload.error }
      };
    case 'VALIDATE_INPUT':
      return {
        ...state,
        error: { ...state.error, [action.name]: action.payload.error }
      };
    case 'SET_VALIDATED':
      return { ...state, validated: action.payload };
    default:
      return state;
  }
};

const UserRegister = () => {
  const initialState = {
    validated: false,
    inputValue: { userName: '', email: '', password: '', repeatPassword: '', location: '', phoneNumber: '' },
    error: { userName: '', email: '', password: '', repeatPassword: '', location: '', phoneNumber: '' }
  };
  const [state, dispatch] = useReducer(formReducer, initialState);

  const handleInputBlur = (e) => {
    const { name, value } = e.currentTarget;
    let errorMsg = '';
    
    if (name === 'userName' && (value.length > 20 || value.length < 5)) errorMsg = 'input length between 5 to 20';
    else if (name === 'location' && (value.length > 30 || value.length < 3)) errorMsg = 'input length between 3 to 30';
    else if (name === 'phoneNumber' && value.includes('_')) errorMsg = 'input length must be 10';
    else if (name === 'email' && !/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/i.test(value)) errorMsg = 'enter valid email address';
    else if (name === 'password' && value.length < 8) errorMsg = 'password length is very less';
    else if (name === 'repeatPassword' && !(value.length === state.inputValue.password.length && value === document.getElementsByName('password')[0].value)) errorMsg = 'password & repeat password must be same';

    dispatch({ type: 'VALIDATE_INPUT', name, payload: { error: errorMsg || null } });
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    const errorMsg = name === 'phoneNumber' && value.includes('_') ? 'phone number length must be 10' : null;
    dispatch({ type: 'UPDATE_INPUT', name, value, payload: { error: errorMsg } });
  };

  // 其余逻辑和渲染部分，将inputValue/error替换为state.inputValue/state.error
};

2. 用useCallback缓存回调函数 #

缓存回调函数，避免每次渲染创建新引用，减少子组件因props变化触发的重渲染。

示例：添加useCallback

import React, { useState, useCallback } from 'react';

const UserRegister = () => {
  const [inputValue, setInputValue] = useState({ /* 初始值 */ });
  const [error, setError] = useState({ /* 初始值 */ });

  const handleInputBlur = useCallback((e) => {
    // 原逻辑不变
  }, [inputValue.password]); // 仅依赖用到的状态

  const handleInputChange = useCallback((e) => {
    const { name, value } = e.target;
    setInputValue(prev => ({ ...prev, [name]: value }));
    setError(prev => {
      const newError = name === 'phoneNumber' && value.includes('_') ? 'phone number length must be 10' : null;
      if (prev[name] !== newError) return { ...prev, [name]: newError };
      return prev; // 无变化时不触发重渲染
    });
  }, []);

  const handleSubmit = useCallback(async (e) => {
    // 原逻辑不变
  }, [inputValue, navigate]);
};

3. 拆分独立输入组件，缩小重渲染范围 #

将每个输入项拆分为独立子组件，用React.memo包裹，仅当前输入项变化时才重渲染。

示例：创建FormInput子组件

import React, { memo } from 'react';
import { CInputGroup, CInputGroupText, CFormInput } from '@coreui/react';
import CIcon from '@coreui/icons-react';

const FormInput = memo(({ labelIcon, placeholder, name, value, onChange, onBlur, required, minLength, maxLength, autoComplete, feedbackInvalid, error }) => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText>{labelIcon && <CIcon icon={labelIcon} />}</CInputGroupText>
        <CFormInput
          placeholder={placeholder}
          name={name}
          value={value}
          onChange={onChange}
          onBlur={onBlur}
          required={required}
          minLength={minLength}
          maxLength={maxLength}
          autoComplete={autoComplete}
          feedbackInvalid={feedbackInvalid}
        />
      </CInputGroup>
      {error && <div style={{ fontSize: '14px', color: '#e65a5a' }}>{error}</div>}
    </>
  );
});

export default FormInput;

在主组件中使用

import FormInput from './FormInput';
import { cilUser, cilLocationPin, cilLockLocked } from '@coreui/icons';

const UserRegister = () => {
  // 状态和回调函数

  return (
    // 外层结构
    <CForm validated={validated}>
      <h1>Register</h1>
      <p className="text-medium-emphasis">Create your account</p>
      <FormInput
        labelIcon={cilUser}
        placeholder="Username"
        name="userName"
        value={inputValue.userName}
        onChange={handleInputChange}
        onBlur={handleInputBlur}
        required
        minLength={5}
        maxLength={20}
        autoComplete="username"
        feedbackInvalid="your name is required"
        error={error.userName}
      />
      {/* 其余普通输入项同理替换 */}
      {/* 手机号输入项单独处理（因使用InputMask） */}
    </CForm>
    // 外层结构
  );
};

4. 优化状态更新逻辑，避免无意义更新 #

在setError时判断新旧值是否一致，不一致才更新状态，减少不必要的重渲染。

示例：优化handleInputChange

const handleInputChange = useCallback((e) => {
  const { name, value } = e.target;
  setInputValue(prev => ({ ...prev, [name]: value }));
  
  setError(prevError => {
    const newError = name === 'phoneNumber' && value.includes('_') 
      ? 'phone number length must be 10' 
      : null;
    if (prevError[name] !== newError) {
      return { ...prevError, [name]: newError };
    }
    return prevError; // 无变化时返回原状态，不触发重渲染
  });
}, []);

内容的提问来源于stack exchange，提问作者Aman Sheth