React 中如何进行组件间通信？-ReactJS面试指南

当前位置:　首页>> 技术小册>> ReactJS面试指南

答案：
React 中进行组件间通信主要有三种方式：props、回调函数和全局状态管理。

第一种方式是通过 props 进行组件间通信。在 React 中，父组件可以向子组件传递数据和回调函数，子组件可以通过 props 属性接收这些数据和回调函数。例如：

```asp
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello, world!' };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ message: 'Hello, React!' });
  }
  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} onClick={this.handleClick} />
      </div>
    );
  }
}
function ChildComponent(props) {
  return (
    <div>
      <p>{props.message}</p>
      <button onClick={props.onClick}>Click me</button>
    </div>
  );
}
```
第二种方式是通过回调函数进行组件间通信。在 React 中，子组件可以向父组件传递数据和回调函数，父组件可以通过 props 属性接收这些回调函数并执行相应的操作。例如：

```asp
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
    this.handleChildClick = this.handleChildClick.bind(this);
  }
  handleChildClick(message) {
    this.setState({ message: message });
  }
  render() {
    return (
      <div>
        <ChildComponent onClick={this.handleChildClick} />
        <p>{this.state.message}</p>
      </div>
    );
  }
}
function ChildComponent(props) {
  function handleClick() {
    props.onClick('Hello, parent!');
  }
  return <button onClick={handleClick}>Click me</button>;
}
```
第三种方式是通过全局状态管理进行组件间通信。在 React 中，可以使用 Redux、MobX 等第三方库来实现全局状态管理。这些库通常使用单一状态树来管理应用程序的状态，并使用发布-订阅模式来实现组件间通信。例如：

```asp
import { createStore } from 'redux';

const initialState = { message: '' };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_MESSAGE':
      return { message: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.unsubscribe = null;
  }
  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      this.setState(store.getState());
    });
  }
  componentWillUnmount() {
    this.unsubscribe();
  }
  render() {
    return (
      <div>
        <ChildComponent />
        <p>{this.state.message}</p>
      </div>
    );
  }
}
function ChildComponent() {
  function handleClick() {
    store.dispatch({ type: 'SET_MESSAGE', payload: 'Hello, parent!' });
  }
  return <button onClick={handleClick}>Click me</button>;
}
```

该分类下的相关小册推荐：

React 进阶实践指南

React全家桶--前端开发与实例(下)

React全家桶--前端开发与实例(上)

剑指Reactjs

深入学习React实战进阶