React 如何在 Class 组件中设置 zustand 状态

在类组件中使用 Zustand 状态管理通常不是直接支持的，因为 Zustand 主要是为 React 的函数组件设计的，利用了 React 的钩子（Hooks）系统。然而，你仍然可以在类组件中间接使用 Zustand。

要在类组件中使用 Zustand，你可以创建一个函数组件作为类组件的子组件或高阶组件，这个函数组件可以使用 Zustand 的 useStore 钩子来访问和修改状态，然后将状态通过 props 传递给需要的类组件。

下面是具体的实现步骤：

1. 定义 Zustand 的 store

   javascript
   import create from 'zustand';
   
   const useStore = create(set => ({
       counter: 0,
       increment: () => set(state => ({ counter: state.counter + 1 })),
       decrement: () => set(state => ({ counter: state.counter - 1 }))
   }));

2. 创建一个函数组件来连接 Zustand store 和类组件

   javascript
   import React from 'react';
   
   const WithZustandStore = (Component) => {
       return function WrappedComponent(props) {
           const { counter, increment, decrement } = useStore();
           
           return <Component 
                      {...props}
                      counter={counter}
                      increment={increment}
                      decrement={decrement}
                  />;
       };
   };

3. 在类组件中使用通过 props 传递的 Zustand 状态和方法

   javascript
   import React, { Component } from 'react';
   
   class CounterComponent extends Component {
       render() {
           const { counter, increment, decrement } = this.props;
   
           return (
               <div>
                   <div>Counter: {counter}</div>
                   <button onClick={increment}>Increment</button>
                   <button onClick={decrement}>Decrement</button>
               </div>
           );
       }
   }
   
   // 使用高阶组件包装类组件
   export default WithZustandStore(CounterComponent);

在这个例子中，WithZustandStore 是一个高阶组件，它接收一个组件作为参数，并返回一个新的组件。这个新组件使用 useStore 钩子来访问 Zustand 的状态和方法，并将它们作为 props 传递给原始的类组件。这样，即使在类组件内部，你也可以使用 Zustand 管理的状态。