【react】react 通信方式

react 通信方式

相关文章

react 通信方式

一、Props 传递

父组件可以通过 props 将数据传递给子组件。这是 React 中最常见和推荐的组件通信方式之一。

// ParentComponent.js
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = 'Hello from parent';
  return <ChildComponent data={data} />;
}

// ChildComponent.js
function ChildComponent({ data }) {
  return <div>{data}</div>;
}

二、Context 上下文

React 的 Context API 可以让你在组件树中传递数据，而不必一级一级手动传递 props。它适用于在组件之间共享全局数据的情况。

// Context.js
import React from 'react';
const MyContext = React.createContext();
export default MyContext;

// ParentComponent.js
import MyContext from './Context';
import ChildComponent from './ChildComponent';

function ParentComponent() {

  const [theme, setTheme] = useState('light');
  return (
    <MyContext.Provider value={{theme}}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './Context';

function ChildComponent() {

  const { theme } = useContext(MyContext);

  return <p>Current Theme: {theme}</p>;
}

三、回调函数

父组件可以通过 props 将回调函数传递给子组件，子组件可以调用这些回调函数来通知父组件发生的事件或者状态变化。

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [data, setData] = useState('');

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

// ChildComponent.js
function ChildComponent({ setData }) {
  const handleClick = () => {
    setData('Data from child');
  };

  return <button onClick={handleClick}>Set Data</button>;
}

四、Ref 引用

父组件可以通过 ref 引用获取子组件的实例，然后调用子组件的方法或者访问子组件的属性。

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef();

  const handleClick = () => {
    childRef.current.methodInChild();
  };

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

// ChildComponent.js
import React, { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const methodInChild = () => {
    console.log('Method called in child');
  };

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

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

export default ChildComponent;

五、Redux 或其他状态管理工具

Redux 是一种用于管理应用程序状态的 JavaScript 库，它提供了一种统一的状态管理机制，可以让不同组件之间共享和修改全局状态。使用 Redux 或其他类似的状态管理工具可以实现跨组件的状态共享和通信。

六、Event Bus 或观察者模式

可以通过创建一个全局的事件总线（Event Bus）或者使用观察者模式来实现组件之间的通信。组件可以订阅事件，当事件发生时，触发对应的回调函数来进行通知。

// Event Bus 示例
const eventBus = new EventEmitter();

// 订阅事件
eventBus.on('customEvent', (data) => {
  console.log('Event received:', data);
});

// 发布事件
eventBus.emit('customEvent', 'Hello from Event Bus');