React组件间通信的几种方式

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

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

父组件：

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>;}
}

二、Callback函数

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

父组件：

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>;}
}

三、Lifting State Up（状态提升）

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

父组件：

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

子组件A和B：

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

四、 Context（上下文）

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

创建Context：

const MyContext = React.createContext(defaultValue);

提供Context值：

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

在子组件中使用Context：

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

或者使用useContext钩子：

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

五、Custom Hooks（自定义钩子）

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

自定义钩子：

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

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

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

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

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

高阶组件：

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