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

要更新子组件中的

props

对象，通常使用生命周期方法

ComponentWillReceiveProps

。但是我意识到子组件的

道具可以在不监听
组件的情况下更新，而组件将接收道具

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

主要的
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'));

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
接收属性
计数器
，而不侦听任何生命周期方法

这是什么意思？我遗漏了什么吗？
componentWillReceiveProps（）
是一种不推荐使用的生命周期方法，在组件即将接收新的props时触发但是，它无法控制组件是否实际收到这些道具。


无论是否执行
componentWillReceiveProps（）
，组件都将从父级接收更新的道具

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

从“React”导入React；
导出类Comp.Comp组件{
建造师（道具）{
超级（道具）；
this.state={}
}
render（）{
console.log（this.props.counter）//仍然使用新的道具数据打印
返回收到的道具：{JSON.stringify（this.Props）}
}
}

请注意，道具严格地从父组件传递到子组件

当父组件通过状态更改重新渲染时，它也会重新渲染子组件，并传递更新的道具。现在，“儿童”组件可以使用这些新道具，并经历事件的生命周期

类似于
componentDidUpdate（）
和
componentWillReceiveProps（）
的事件允许您执行一些额外的逻辑，但组件接收道具或重新渲染不需要这些逻辑。该组件将重新渲染，无论其使用情况如何

此外，子组件可以通过内部状态更新进行自我更新，更新方式与任何基于类的组件相同。
每次在父节点/组件上设置状态时，它都会使用最新的道具重新呈现所有子组件。因此，基本上只要重新渲染父组件，该节点的所有子组件都将重新渲染

默认行为是在每次状态更改时重新渲染，在绝大多数情况下，您应该依赖默认行为

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

也考虑使用纯组件而不是组件。它对道具和状态进行了粗略的比较，并减少了跳过必要更新的可能性
 我认为子组件正在重新渲染。这就是为什么你会得到更新的道具。当应用程序的状态发生变化时，它会再次渲染，使子组件也重新渲染。当不重新渲染父组件时，生命周期方法很方便。我们只是想让我们的子组件重新渲染。@OsamaKhalid我不明白。您能举一个例子，说明父组件没有被重新呈现，而子组件被重新呈现。很抱歉，我在上面的评论中犯了一个错误。ComponentWillReceiveprops不控制子组件的重新渲染。当父组件的状态更改时，子组件将始终重新呈现。这种方法的用途是，它使我们能够为我们的子组件做出逻辑决策，因为它有以前的props和nextrops，所以我们可以在调用子函数的呈现之前，使用它们为我们的子组件设置一些数据/状态。