React 函数式组件通信方式了解吗？

在React的函数式组件中，组件通信可以通过多种方式实现。 以下是一些常用的函数式组件通信方式及其代码示例：

• props
• Callback函数
• Context API
• useReducer 管理状态
• useRef和useImperativeHandle暴露DOM元素
• 状态管理库 Zustand

1. 使用props

父组件向子组件传递数据，这是最基本的通信方式。

// 父组件 Parent.js
const Parent = ({ children }) => {
  const message = 'Hello from Parent';
  return <Child message={message}>{children}</Child>;
};

// 子组件 Child.js
const Child = ({ message }) => {
  return <div>{message}</div>;
};

2. 使用Callback函数

子组件向父组件传递数据，通过回调函数实现。

// 父组件 Parent.js
const Parent = () => {
  const handleData = (data) => {
    console.log('Data from Child:', data);
  };

  return <Child onData={handleData} />;
};

// 子组件 Child.js
const Child = ({ onData }) => {
  const sendData = () => {
    onData('Hello from Child');
  };

  return <button onClick={sendData}>Send Data to Parent</button>;
};

3. 使用Context API

跨层级组件通信，避免逐层传递props。

// 创建Context
const MyContext = React.createContext();

// 父组件 Parent.js
const Parent = () => {
  const value = 'Hello Context';
  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
};

// 子组件 Child.js
const Child = () => {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
};

4. 使用useReducer 管理状态

import React, { useReducer } from 'react';

// 状态管理器
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

// 子组件
const ChildComponent = ({ dispatch }) => {
  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
};

// 父组件
const ParentComponent = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return <ChildComponent count={state.count} dispatch={dispatch} />;
};

export default ParentComponent;

5. 使用useRef和useImperativeHandle暴露DOM元素

import React, { useRef, forwardRef, useImperativeHandle } from 'react';

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focusInput() {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});

// 父组件
const ParentComponent = () => {
  const childRef = useRef(null);

  const handleFocus = () => {
    childRef.current.focusInput();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

6. 使用状态管理库 Zustand

Zustand是一个轻量级、直观且强大的React状态管理库，它提供了一种比Redux和MobX等流行状态管理库更简单、更灵活的方式来管理React项目中的状态。

import React from 'react';
import { create } from 'zustand';

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

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;