React实现组件间通信的几种方式小结

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

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

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

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

class ParentComponent extends React.Component {
  state = { sharedData: 'Shared Data' };
 
  render() {
    return (
      <>
        <ChildA sharedData={this.state.sharedData} />
        <ChildB sharedData={this.state.sharedData} />
      </>
    );
  }
}

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

const MyContext = React.createContext(defaultValue);

<MyContext.Provider value={/* 一些值 */}>
  {/* 组件树 */}
</MyContext.Provider>

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {value => <div>{value}</div>}
      </MyContext.Consumer>
    );
  }
}

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

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

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

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