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

Question

要更新子组件中的props对象，通常使用生命周期方法ComponentWillReceiveProps。但是我意识到子组件的props可以在不监听ComponentWillReceiveProps的情况下进行更新。

例如，在名为App的以下组件中，子组件Comp可以接收props，而无需侦听生命周期方法ComponentWillReceiveProps。

主要App组件：

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'));

和子Comp组件：

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

这也是我编写的上述代码的工作演示

您将看到子组件Comp接收到属性counter，而没有侦听任何生命周期方法。

是什么意思？我想念什么吗？

Answer 1

class HomeView(TemplateView): default_template = CustomTemplate.objects.first().name template_name = default_template + '/home.html' 是已弃用的生命周期方法，当组件将要接收新道具时会触发该方法。 但是，它无法控制组件是否实际收到这些道具。

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

无论是否执行componentWillReceiveProps()，组件都会从父级接收更新的道具。

componentWillReceiveProps()

请注意，道具严格从父级传递给子级组件。

通过状态更改重新渲染父级组件时，它也会重新渲染子级组件，并传递更新后的道具。现在，子组件可以访问这些新道具，并且可以经历事件的React生命周期。

诸如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> } } 和componentDidUpdate()之类的事件使您能够执行一些额外的逻辑，但是组件接收道具或重新渲染则不需要它们。无论使用什么组件，该组件都会重新渲染。

此外，Child组件可以通过内部状态更新来更新自身，就像任何基于类的组件一样。

Answer 2

每次在父节点/组件上执行setState时，它都会使用最新的道具重新渲染所有子组件。因此，基本上，无论何时重新渲染父组件，该节点的所有子组件都将重新渲染。

默认行为是在每次状态更改时重新呈现，并且在大多数情况下，您应该依赖默认行为。

如果您不希望子组件在某些情况下重新渲染，则可以使用shouldComponentUpdate生命周期。这个生命周期只是性能优化。 Read about shouldcomponentupdate

也可以考虑使用PureComponent代替component。它对道具和状态进行了较浅的比较，并减少了您跳过必要更新的机会。 Read about PureComponent