React Native多组件调用同一Hook如何实现状态值同步

问题根因 #

• 普通自定义Hook的状态是组件实例级隔离的：每在一个组件中调用useWord，都会生成独立的word、errorMessage状态和changeWord方法，不同组件的状态完全不互通，自然无法同步更新。
• 导航离开再返回组件时，旧组件实例销毁，新实例调用useWord会重新初始化状态，加上原Hook内空依赖的useEffect会在初始化时调用changeWord('B')，就会出现值被重置的问题。
• 补充：原Hook中setWord([...word, letter])的写法存在闭包隐患，建议改用函数式更新，确保每次都拿到最新的状态值。

解决方案 #

方案1：基于React Context实现（无第三方依赖） #

无需修改原有业务组件代码，只需要调整自定义Hook实现，加一层Provider包裹应用根节点即可：

1. 新建WordContext.js文件，代码如下：

import { createContext, useContext, useState } from 'react';

const WordContext = createContext();

export const WordProvider = ({ children }) => {
  const [word, setWord] = useState(['B']);
  const [errorMessage, setErrorMessage] = useState('');

  const changeWord = async (letter) => {
    console.log('Hi there');
    try {
      // 改用函数式更新避免闭包问题
      setWord(prev => [...prev, letter]);
    } catch (err) {
      setErrorMessage('Something went wrong');
    }
  };

  return (
    <WordContext.Provider value={[changeWord, word, errorMessage]}>
      {children}
    </WordContext.Provider>
  );
};

// 封装成和原来用法一致的自定义Hook
export default () => useContext(WordContext);

2. 在应用根节点包裹WordProvider，如果用React Navigation，包裹在NavigationContainer外层即可：

import { WordProvider } from './WordContext';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <WordProvider>
      <NavigationContainer>
        {/* 原有路由配置 */}
      </NavigationContainer>
    </WordProvider>
  );
}

调整完成后，所有组件调用useWord拿到的都是全局共享的状态，修改会同步到所有引用组件，导航跳转也不会丢失状态。

方案2：基于Zustand实现（代码更精简） #

适合愿意引入轻量状态库的场景，无需Provider包裹，性能更优：

1. 安装依赖：
   npm install zustand
2. 改写自定义HookuseWord.js：

import { create } from 'zustand';

export default create((set) => ({
  word: ['B'],
  errorMessage: '',
  changeWord: async (letter) => {
    console.log('Hi there');
    try {
      set(state => ({ word: [...state.word, letter] }));
    } catch (err) {
      set({ errorMessage: 'Something went wrong' });
    }
  }
}));

3. 业务组件内调整取值方式即可：

// 原来的写法是 const [changeWord, word, errorMessage] = useWord();
// 调整为：
const changeWord = useWord(state => state.changeWord);
const word = useWord(state => state.word);
const errorMessage = useWord(state => state.errorMessage);

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