React组件间通信的几种方式

一、Props向下传递（Top-Down Propagation）

父组件通过props将其状态或数据传递给子组件。

父组件：

class ParentComponent extends React.Component {
  state = { message: 'Hello World' };
  render() {
    return ;
  }
}

子组件;

class ChildComponent extends React.Component {
  render() {
    return {this.props.message};
  }
}

二、Callback函数

父组件向子组件传递一个回调函数，子组件在需要时调用这个函数与父组件通信。

父组件：

class ParentComponent extends React.Component {
  handleData = (data) => {
    console.log('Received from child:', data);
  };
  render() {
    return ;
  }
}

子组件：

class ChildComponent extends React.Component {
  someEvent = () => {
    this.props.sendData('Data from child');
  };
  render() {
    return Send Data to Parent;
  }
}

三、Lifting State Up（状态提升）

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

父组件：

class ParentComponent extends React.Component {
  state = { sharedData: 'Shared Data' };
  render() {
    return (
      
        
        
      
    );
  }
}

子组件A和B：

class ChildComponent extends React.Component {
  render() {
    return {this.props.sharedData};
  }
}

四、 Context（上下文）

React的Context API允许你共享值给组件树中的所有组件，而不必显式地通过每个层级传递props

创建Context：

const MyContext = React.createContext(defaultValue);

提供Context值：

  {/* 组件树 */}

在子组件中使用Context：

class ChildComponent extends React.Component {
  render() {
    return (
      
        {value => {value}}
      
    );
  }
}

或者使用useContext钩子：

import { useContext } from 'react';
const ChildComponent = () => {
  const value = useContext(MyContext);
  return {value};
};

五、Custom Hooks（自定义钩子）

自定义钩子允许你提取组件逻辑，使其可以在多个组件间重用。

自定义钩子：

function useCustomHook() {
  const [state, setState] = useState(initialState);
  // 钩子的逻辑...
  return state;
}

在组件中使用自定义钩子：

const Component = () => {
  const state = useCustomHook();
  return {state};
};

六、 Higher-Order Components（高阶组件）

高阶组件是React中的一个高级技术，它通过包装一个组件来扩展其功能。

高阶组件：

function enhanceComponent(WrappedComponent) {
  return class extends React.Component {
    // 扩展逻辑...
    render() {
      return ;
    }
  };
}
//使用高阶组件：
const EnhancedComponent = enhanceComponent(OriginalComponent);