子组件如何在不监听生命周期方法的情况下从父组件接收 props？

Question

To update the props object in the child components, usually the life cycle method ComponentWillReceiveProps is used. But I realized that the props for the child component could be updated without listening for ComponentWillReceiveProps .

For example, in the following component named App , the child component Comp is able to receive the props without listening for the life cycle method ComponentWillReceiveProps .

The main App component:

import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp";

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }

    this.incrementCounter = this.incrementCounter.bind(this);
  }

  componentDidMount() {
    this.setState({
      counter: 100
    })
  }

  incrementCounter() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  render() {
    return (
      <div>
              <button onClick={this.incrementCounter}>Increment</button>
              <br />
              <br />
              <Comp counter={this.state.counter}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

and the child Comp component:

import React from 'react';

export class Comp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("prev props ", prevProps);
    console.log("prev state", prevState)
  }

  render() {
    return <span>Props received: {JSON.stringify(this.props)}</span>
  }
}

Here is also the working demo of the above code I prepared

You will see that the child component Comp receives property counter without listening for any lifecycle method.

What does it mean? Am I missing anything?

Answer 1

componentWillReceiveProps() is a deprecated life-cycle method that is triggered when a component is about to receive new props. However, it has no control over whether the component actually receives those props.

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

The component will receive updated props from parent regardless of whether componentWillReceiveProps() is executed.

import React from 'react';

export class Comp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    console.log(this.props.counter) //still gets printed with new props data
    return <span>Props received: {JSON.stringify(this.props)}</span>
  }
}

Note that props are passed down strictly from Parent to Child Component.

When a Parent component is re-rendered via state-change, it re-renders the Child components as well and it passes down updated props. Now the children component have access to those new props and they go through the React life-cycle of events.

Events like componentDidUpdate() and componentWillReceiveProps() allow you to execute some extra logic, but they are not required for the component to receive props or re-render. The component will re-render regardless of their usage.

Additionally, a Child-component can update itself via internal state-updating the same way any class-based component would.

Answer 2

Every time you do setState on the parent node/component it re-renders all the child component with the latest props. So basically whenever parent component is re-rendered, all the child components of that node are re-rendered.

The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

In case you don't want your child component to re-render on some condition the you can use shouldComponentUpdate lifecycle. This lifecycle is just a performance optimization. Read about shouldcomponentupdate

Also consider using PureComponent instead of component. It performs a shallow comparison of props and state, and reduces the chance that you'll skip a necessary update. Read about PureComponent