在ReactJS中处理set/removeAttribute和添加classList的更好方法

在ReactJS中，处理DOM元素的属性和类列表时，推荐使用React的状态管理和受控组件的概念，而不是直接操作DOM。这是因为React的核心理念是通过声明式编程来管理UI，确保组件的状态和DOM保持同步。

基础概念

受控组件：在React中，受控组件是指其值由React状态管理的表单元素。对于其他DOM属性和类列表，也可以采用类似的概念。

状态管理：使用useState或useReducer等Hook来管理组件的状态。

优势

一致性：通过状态管理，可以确保UI的一致性和可预测性。
性能优化：React的虚拟DOM可以高效地处理状态变化，减少不必要的DOM操作。
易于维护：代码更加模块化和清晰，便于团队协作和维护。

类型与应用场景

使用`useState`管理属性和类列表

适用于简单的状态管理，如开关按钮的激活状态、元素的可见性等。

import React, { useState } from 'react';

function ToggleButton() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={() => setIsActive(!isActive)}
    >
      {isActive ? 'Active' : 'Inactive'}
    </button>
  );
}

使用`useReducer`管理复杂状态

适用于需要处理多个子值的复杂状态逻辑。

import React, { useReducer } from 'react';

const initialState = { isActive: false, isDisabled: false };

function reducer(state, action) {
  switch (action.type) {
    case 'TOGGLE_ACTIVE':
      return { ...state, isActive: !state.isActive };
    case 'TOGGLE_DISABLED':
      return { ...state, isDisabled: !state.isDisabled };
    default:
      throw new Error();
  }
}

function ComplexButton() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <button
      className={`${state.isActive ? 'active' : ''} ${state.isDisabled ? 'disabled' : ''}`}
      onClick={() => dispatch({ type: 'TOGGLE_ACTIVE' })}
      disabled={state.isDisabled}
    >
      {state.isActive ? 'Active' : 'Inactive'}
    </button>
  );
}

遇到问题及解决方法

问题：直接操作DOM可能导致React的状态和实际DOM不一致。

原因：React无法追踪直接对DOM的操作，导致虚拟DOM和实际DOM之间的差异。

解决方法：始终通过React的状态来管理DOM属性和类列表。如果必须直接操作DOM（例如处理第三方库的集成），可以使用useRef来获取DOM引用，并在适当的生命周期方法中进行操作。

import React, { useRef, useEffect } from 'react';

function ExternalLibraryIntegration() {
  const elementRef = useRef(null);

  useEffect(() => {
    if (elementRef.current) {
      // 初始化第三方库
      externalLibrary.init(elementRef.current);
    }

    return () => {
      // 清理操作
      externalLibrary.destroy(elementRef.current);
    };
  }, []);

  return <div ref={elementRef}></div>;
}

通过这种方式，可以确保React的状态和DOM保持同步，避免潜在的不一致问题。