建议减少 React useState hooks 的数量

Posted 2023-04-14

【中文标题】建议减少 React useState hooks 的数量

【英文标题】：Advise about the reduction of the amount of React useState hooks

【发布时间】：2021-12-19 01:46:00

【问题描述】：

我正在尝试构建我自己的第一个相对较大的项目，至少就我的经验水平而言。 我严重依赖 useContext 和 useStates 挂钩来处理我的不同组件之间的逻辑，随着时间的推移，跟踪所有这些不同的状态变化和简单的 onClick 事件真的开始变得困难，我必须改变逻辑大量的州。

希望能得到一些个人建议，引导我朝着正确的方向前进。 不知何故，我的所作所为感觉不正常，或者这就是 React 的现实？ 肯定有更聪明的方法来减少状态逻辑管理的数量吗？

这是我正在使用的一些 sn-ps 代码

  const onClick = (note: INote) => 
    SetAddNote(false);
    SetNote(note);
    onSelected(note)
    SetReadOnly(true);
    SetEditor(note.data.value);
    SetInputValue(note.data.name);
    SetCategory(note.data.category);
  ;

  const  note, noteDispatch, SetNoteDispatch  = useContext(NoteContext);
  const  categories  = useContext(CategoriesContext);
  const [ editMode, setEditMode ] = useState(false);
  const [ module, setModule ] = useState<>(modulesReadOnly)
  const [inputValue, setInputValue] = useState<string>('');
  const [category, setCategory] = useState('');
  const [color, setColor] = useState('');

import React,  createContext, useState  from 'react';


type EditorContextType = 
  editor: string;
  SetEditor: React.Dispatch<React.SetStateAction<string>>;
  readOnly: boolean;
  SetReadOnly: React.Dispatch<React.SetStateAction<boolean>>;
  inputValue: string;
  SetInputValue: React.Dispatch<React.SetStateAction<string>>;
  category: string;
  SetCategory: React.Dispatch<React.SetStateAction<string>>;
;

type EditorContextProviderProps = 
  children: React.ReactNode;
;

export const EditorContext = createContext( as EditorContextType);

export const EditorContextProvider = (
  children,
: EditorContextProviderProps) => 
  const [editor, SetEditor] = useState('');
  const [readOnly, SetReadOnly] = useState(false)
  const [inputValue, SetInputValue] = useState('');
  const [category, SetCategory] = useState('');
  return (
    <EditorContext.Provider value= editor, SetEditor, readOnly, SetReadOnly, inputValue, SetInputValue, category, SetCategory  >
      children
    </EditorContext.Provider>
  );
;

当然，我可以删除一些状态并将它们合并为一个，但似乎这会变得比现在更复杂。

我正在阅读有关 useReducer 钩子的信息，但是很难掌握它背后的整个想法，并且不太确定在这种情况下它是否真的会帮助我。 鉴于我继续以这种方式工作，我觉得我正在为自己设定失败，但我没有看到任何更好的选择来实施

【问题讨论】：

注释、编辑器、输入值和类别都源于onClick 中的note 参数。你有没有机会简单地为笔记设置 one 值，而不是 5 个单独的状态？然后在需要时检索嵌套属性（例如note.data.category）。

如果没有 - 如果实际上没有足够的重叠来实际组合这些状态 - 那么，如果没有更多信息，我认为你正在做的事情没有任何问题。它需要大量的样板，这是不幸的（使用大量状态和 TS），但它不是 bad 代码。也许，别担心。

当然还不是世界末日，但我刚开始写代码，已经有这么多状态，它会变得更糟，太多事件的太多状态变化，我几乎没有可以再跟踪它了。

【参考方案1】：

我也从事大型项目，正如您在问题中所说，Reducer 将帮助您解决您的问题，但是您需要小心如何构建和管理您的状态，因此您需要了解如何管理一个状态，所以在我回答之前，我会写一些重要的说明：

确保尽可能减少嵌套上下文，仅在需要时构建和使用上下文，这将优化您的工作 对于处理或合并状态，您可以使用对象、数组和普通变量，但请记住，尽量防止对象的嵌套级别，以在状态更改时保持状态更新。 使用 reducer 处理状态更新会给你一个很好的能力 我们可以采取一些技巧来提高性能，例如在 reducer 中设置条件来检查旧状态和新状态。

请记住，它真的很容易使用，但第一次很难学习......

现在让我们从一个真实的项目示例开始：

// create VirtualClass context
export const JitsiContext = React.createContext();

// General Action
const SET_IS_SHARED_SCREEN = 'SET_IS_SHARED_SCREEN';
const SET_ERROR_TRACK_FOR_DEVICE = 'SET_ERROR_TRACK_FOR_DEVICE';
const UPDATE_PARTICIPANTS_INFO = 'UPDATE_PARTICIPANTS_INFO';
const UPDATE_LOCAL_PARTICIPANTS_INFO = 'UPDATE_LOCAL_PARTICIPANTS_INFO';

// Initial VirtualClass Data
const initialState = 
  errorTrackForDevice: 0,
  participantsInfo: [],
  remoteParticipantsInfo: [],
  localParticipantInfo: 
;

// Global Reducer for handling state
const Reducer = (jitsiState = initialState, action) => 
  switch (action.type) 
    case UPDATE_PARTICIPANTS_INFO:// Update particpants info and remote list
      if (arraysAreEqual(action.payload, jitsiState.remoteParticipantsInfo)) 
        return jitsiState;
      

      return 
        ...jitsiState,
        participantsInfo: [jitsiState.localParticipantInfo, ...action.payload],
        remoteParticipantsInfo: action.payload,
      ;
    case UPDATE_LOCAL_PARTICIPANTS_INFO:// Update particpants info and local one
      if (JSON.stringify(action.payload) === JSON.stringify(jitsiState.localParticipantInfo)) 
        return jitsiState;
      

      return 
        ...jitsiState,
        localParticipantInfo: action.payload,
        participantsInfo: [action.payload, ...jitsiState.remoteParticipantsInfo],
      ;
    case SET_IS_SHARED_SCREEN:
      if (action.payload === jitsiState.isSharedScreen) 
        return jitsiState;
      

      return 
        ...jitsiState,
        isSharedScreen: action.payload,
      ;
    default:
      throw new Error(`action: $action.type not supported in VirtualClass Context`);
  
;


const JitsiProvider = (children) => 
  const [jitsiState, dispatch] = useReducer(Reducer, initialState);
  
  // Update shared screen flag
  const setIsSharedScreen = useCallback((flag) => 
    dispatch(type: SET_IS_SHARED_SCREEN, payload: flag)
  , []);

  // Update list of erros
  const setErrorTrackForDevice = useCallback((value) => 
    dispatch(type: SET_ERROR_TRACK_FOR_DEVICE, payload: value)
  , []);
  
  // Local Participant info
  const updateLocalParticipantsInfo = useCallback((value) => 
    dispatch(type: UPDATE_LOCAL_PARTICIPANTS_INFO, payload: value)
  , []);
  
  const updateParticipantsInfo = useCallback(async (room, currentUserId = null) => 
    if (!room.current) 
      return;
    

    // get current paricipants in room
    let payloads = await room.current.getParticipants();
    // ... some logic
    let finalResult = payloads.filter(n => n).sort((a, b) => (b.startedAt - a.startedAt));
    dispatch(type: UPDATE_PARTICIPANTS_INFO, payload: finalResult)
  , []);

  const contextValue = useMemo(() => 
    return 
      jitsiState,
      setIsSharedScreen,
      setErrorTrackForDevice,
      updateParticipantsInfo,
      updateLocalParticipantsInfo,
    ;
  , [jitsiState]);

  return (
    <JitsiContext.Provider
      value=contextValue
    >
      children
    </JitsiContext.Provider>
  );
;

export default JitsiProvider;

这个例子可以让你更新 state 并且你有多个 case，所有 state 值都由 jitsiState 共享，所以你可以得到你想要的任何数据，关于函数，你可以直接使用 dispatch ！但是根据我们的经验，我们也构建了一个回调方法并通过提供者发送它，这使我们可以在一个地方控制代码和逻辑，并使过程非常容易，所以当点击每个地方时，我们只需调用所需的方法......

您还将看到条件和 useMemo...这些以防止渲染不需要的触发器，例如更改内存中的键而不是实际值等等...

最后在我们使用它之后，我们现在控制所有组件之间的所有状态太容易了，我们没有嵌套上下文，除了包装上下文。

注意：您可以根据自己的逻辑或需要的概念跳过或更改此代码。

注意 2：此代码是经过整理的，并进行了一些更改以使其易于阅读或理解...

注意3：你可以忽略所有传入provider的函数，直接使用dispatch，但在我的项目中，我发送了一个类似这个例子的函数。

【讨论】：

这看起来很有希望，我仍然需要消化它，但我应该能够使用该示例代码并构建类似的东西，谢谢

不客气！我希望它对您有所帮助，在我的项目中，它让我的生活变得轻松......

@Georgi IMO，reducer 方法会产生更多样板，但没有太多收益......但这取决于你