我们知道子组件调用父组件的方法，可以使用props传值给子组件，请问除了此方式还有其他的方式吗？

Question

我们知道子组件调用父组件的方法，可以使用props传值给子组件，请问除了此方式还有其他的更加简单的方式吗？
请问是否可以给一个示例呢？

如果能使用zustand来进行实现就更加好。

Answer 1

使用Zustand可以避免直接通过props传递回调函数，通过全局状态管理来实现跨组件的方法调用。这种方式简化了组件间的通信，尤其是在复杂的组件树中，以下是代码示例：

创建一个简单的store

// store.js
import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}));

export default useStore;

父组件中

// ParentComponent.js
import React from 'react';
import useStore from './store';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment in Parent</button>
      <ChildComponent />
    </div>
  );
}

export default ParentComponent;

子组件中

// ChildComponent.js
import React from 'react';
import useStore from './store';

function ChildComponent() {
  const decrement = useStore(state => state.decrement);

  return (
    <div>
      <button onClick={decrement}>Decrement in Child</button>
    </div>
  );
}

export default ChildComponent;