How Do ReactJS Components Effectively Communicate with Each Other?

How can components in ReactJS interact with one another?

When building applications in ReactJS, it's common to encounter scenarios where you need multiple components to interact and communicate data or events. This can lead to the question of how to best facilitate these interactions.

Approaches for Component Communication

The choice of approach depends on the relationship and hierarchy of your components:

• Scenario 1: Filters -> List

  In this scenario, the Filters component is a child of the List component. The List component can pass a handler function to the Filters component. When the filter input changes, the handler can be invoked to update the List's state with the new filter value.

• Scenario 2: Parent -> Filters & List

  When both Filters and List are children of a common parent, the parent can handle the communication. It can maintain state for the filter and pass the latest value to both Filters and List.

• Scenario 3: Independent Components

  For components that lack a parent-child relationship, React recommends using a global event system. This can be achieved using the componentDidMount() method to add event listeners and componentWillUnmount() to remove them.

Code Examples

Scenario 1 (Filters -> List)

// Filters.js
handleChange = () => {
  const value = this.input.value;
  this.props.updateFilter(value);
};

// List.js
handleFilterChange = (value) => this.setState({ filter: value });
<Filters onChange={this.handleFilterChange} />

Scenario 2 (Parent -> Filters & List)

// Parent.js
filterChange = (value) => this.setState({ filter: value });

// Filters.js
render() {
  const { filter, updateFilter } = this.props;
  return <input value={filter} onChange={updateFilter} />;
}

// List.js
render() {
  const { filter, items } = this.props;
  return <ul>{items.filter(item => item.includes(filter)).map(...)}</ul>;
}

Scenario 3 (Global Event System)

// GlobalEventEmitter.js
events = {};
on = (event, cb) => events[event] ? events[event].push(cb) : events[event] = [cb];
emit = (event, ...args) => events[event] ? events[event].forEach(cb => cb(...args)) : null;

// ComponentA.js
emit("customEvent", { ... });
componentDidMount() {
  on("customEvent", (payload) => this.setState({ ...payload }));
}

// ComponentB.js
emit("customEvent", { ... });
componentDidMount() {
  on("customEvent", (payload) => this.setState({ ...payload }));
}

The above is the detailed content of How Do ReactJS Components Effectively Communicate with Each Other?. For more information, please follow other related articles on the PHP Chinese website!