使用 use-between 共享 React 组件状态的最佳实践

使用 use-between 共享 React 组件状态的最佳实践

use-between Sharing state between React components 项目地址: https://gitcode.com/gh_mirrors/us/use-between

1. 项目介绍

use-between 是一个开源的 React hooks 库，它允许你在不同的 React 组件之间共享状态和逻辑，而不必通过繁琐的 props 传递。这个库通过创建一个可以在多个组件之间共享的 hook，使得状态管理变得更加简洁和直观。

2. 项目快速启动

首先，你需要安装 use-between 库：

npm install use-between
# 或者
yarn add use-between

下面是一个简单的例子，展示如何使用 use-between 来共享一个计数器的状态：

import React from 'react';
import { useState, useCallback } from 'react';
import { useBetween } from 'use-between';

const useCounter = () => {
  const [count, setCount] = useState(0);

  const inc = useCallback(() => setCount(c => c + 1), []);
  const dec = useCallback(() => setCount(c => c - 1), []);

  return { count, inc, dec };
};

const useSharedCounter = () => useBetween(useCounter);

const CounterDisplay = () => {
  const { count } = useSharedCounter();

  return <p>{count}</p>;
};

const CounterButtons = () => {
  const { inc, dec } = useSharedCounter();

  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <CounterDisplay />
    <CounterButtons />
    <CounterDisplay />
    <CounterButtons />
  </>
);

export default App;

在这个例子中，useCounter 是一个普通的 hook，用于管理计数器的状态。useSharedCounter 使用 useBetween 包装 useCounter，使其状态可以在组件间共享。CounterDisplay 和 CounterButtons 组件使用 useSharedCounter 来访问和修改共享状态。

3. 应用案例和最佳实践

主题切换

在应用中，你可能需要在多个组件间共享一个主题状态，如下所示：

const useTheme = () => useState('light');

const useSharedTheme = () => useBetween(useTheme);

const ThemeSwitcher = () => {
  const [theme, setTheme] = useSharedTheme();

  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  return (
    <button onClick={toggleTheme}>Toggle Theme</button>
  );
};

const ThemedComponent = () => {
  const [theme] = useSharedTheme();

  return (
    <div style={{ backgroundColor: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      I'm themed!
    </div>
  );
};

表单处理

在处理表单时，可以使用 use-between 来共享表单状态和验证逻辑。

const useFormData = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });

  // 其他表单处理逻辑...

  return { formData, setFormData };
};

const useSharedFormData = () => useBetween(useFormData);

const FormComponent = () => {
  const { formData, setFormData } = useSharedFormData();

  // 使用 formData 和 setFormData 渲染表单...
};

4. 典型生态项目

目前，use-between 在 GitHub 上拥有超过 200 个 Star，已经有不少项目在使用这个库来简化状态共享的逻辑。以下是一些可能与之配合使用的典型生态项目：

• react-router：在路由变化时共享状态。
• redux：在某些情况下，可以用 use-between 替代 Redux，以简化状态管理。
• apollo-client：在 GraphQL 数据获取和状态更新时共享状态。

使用 use-between 可以让你的 React 应用的状态管理更加灵活和高效。希望上述内容能够帮助你开始使用这个强大的库。

use-between Sharing state between React components 项目地址: https://gitcode.com/gh_mirrors/us/use-between