Question

如何了解组件，更改其道具以便重新渲染？

例如：

function component(props){
  return <p>{this.props.childVar}</p>
}

function parentComp(){
  let parentVar = 0;

   setTimeout(()=>{
    parentVar++;
    //what happens between: after this statement is executed and till the child component is re-rendered ?
  }, 1000)
  return <component childVar={parentVar} />
}

Answer 1

React API的最重要方面之一是它是声明性的，您不必担心何时以及如何捕获和处理更改。

基本上，每次您调用render时，都会生成一棵不同的react元素树，React的diffing algorithm将比较旧树和新树，并在必要时进行更改。

从component的角度来看，实例本身并不了解树，更改和更新。毕竟，它只是一个函数，根据其参数（props）和局部状态（如果有）返回一个react元素。

您可以在Docs

中了解更多信息

Answer 2

在您的代码片段中，子组件将永远不会重新渲染，因为您所做的只是更改局部变量，而子组件将永远不会知道。因此，简短的答案是组件不知道道具是否已更改。

重新渲染组件有两个原因：

this.setState被称为
重新渲染了父组件

反应如何在内部检测组件中的变化？

2 个答案: