react 18父子组件通信

在React 18中，父子组件之间的通信方式与之前的版本基本相同，主要可以通过以下几种方式实现：

1. Props（属性）

父组件向子组件传递数据：

父组件通过属性（props）向子组件传递数据，子组件通过props接收数据。

// 父组件
function ParentComponent() {
  const message = "Hello from Parent";

  return <ChildComponent message={message} />;
}

// 子组件
function ChildComponent({ message }) {
  return <div>{message}</div>;
}

子组件向父组件传递数据：

子组件通过调用父组件传递下来的函数来传递数据。

// 父组件
function ParentComponent() {
  const handleReceiveData = (data) => {
    console.log("Received data from child:", data);
  };

  return <ChildComponent onReceiveData={handleReceiveData} />;
}

// 子组件
function ChildComponent({ onReceiveData }) {
  const data = "Hello from Child";

  return <button onClick={() => onReceiveData(data)}>Send Data to Parent</button>;
}

2. Context（上下文）

当需要在多个层级的组件之间传递数据时，可以使用Context。

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

// 父组件
function ParentComponent() {
  const message = "Hello from Parent";

  return (
    <MyContext.Provider value={message}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  const message = useContext(MyContext);

  return <div>{message}</div>;
}

3.Refs（引用）

如果需要直接在父组件中操作子组件的DOM或状态，可以使用Refs。

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

  const handleParentClick = () => {
    if (childRef.current) {
      childRef.current.childMethod();
    }
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleParentClick}>Call Child Method</button>
    </>
  );
}

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  const childMethod = () => {
    console.log("Child method called");
  };

  useImperativeHandle(ref, () => ({
    childMethod,
  }));

  return <div>Child Component</div>;
});

4. State Lift（状态提升）

当多个子组件需要共享状态时，可以将状态提升到它们的共同父组件中管理。

// 父组件
function ParentComponent() {
  const [sharedState, setSharedState] = useState("initial state");

  const updateState = (newState) => {
    setSharedState(newState);
  };

  return (
    <>
      <ChildComponentA sharedState={sharedState} updateState={updateState} />
      <ChildComponentB sharedState={sharedState} updateState={updateState} />
    </>
  );
}

// 子组件A
function ChildComponentA({ sharedState, updateState }) {
  return <button onClick={() => updateState("New state from A")}>Update State from A</button>;
}

// 子组件B
function ChildComponentB({ sharedState }) {
  return <div>Shared State: {sharedState}</div>;
}

在React 18中，这些通信方式仍然有效，并且可以结合使用以满足不同的需求。选择哪种方式取决于你的具体场景和组件结构。