Javascript 对行为作出反应

考虑以下简单组件：

import React, { Fragment, memo } from 'react';

function Parent(props) {
  return (
    <Fragment>
      <Child {...props} />
      <Child foobar={props.foobar} />
    </Fragment>
  );
}

export default memo(Parent);

import React，{Fragment，memo}来自“React”；
函数父级（道具）{
返回(
);
}
导出默认备忘录（父级）；

import React，{memo}来自“React”；
函数子（{foobar}）{
返回(
{foobar}

);
}
导出默认备忘（子项）；

据我所知，在React.memo（）中包装组件将确保只在其道具发生更改时重新呈现它

因此，除非传递给“父级”的任何道具发生变化，否则该组件及其整个子级血统将不会重新呈现

---

然而，它的两个孩子呢？可以理解，如果“props.fooobar”发生变化，它们都将被重新渲染。但是如果“道具，一些东西”被改变了呢？其中哪一个将在此处重新渲染？

如果给

父组件的
fooobar
以外的另一个道具发生变化，则
父组件将重新渲染，但第一个
子组件也将重新渲染，因为该子组件将被赋予给父组件的所有道具，所以它的道具也会改变

示例


const{memo，Fragment}=React；
const Parent=备忘录（道具=>{
console.log（“呈现的父项”）；
返回(
);
});
const Child=memo（{foobar}）=>{
console.log（“呈现子项”）；
返回{foobar}
；
});
类应用程序扩展了React.Component{
状态={
foobar：“foo”，
Bazzux：“baz”
};
componentDidMount（）{
setTimeout（（）=>this.setState（{foobar:bar}），1000）
setTimeout（（）=>this.setState（{bazqux:qux}），2000）
}
render（）{
const{foobar，bazzux}=this.state；
返回；
}
}
render（，document.getElementById（“根”））
由于函数的呈现方法，它不会重新呈现，在您的情况下，不会重新呈现返回。
import React, { memo } from 'react';

function Child({ foobar }) {
  return (
    <p>{foobar}</p>
  );
}

export default memo(Child);