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

import React, { useState } from 'react';

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

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

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>
  );
}

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>;
}