ReactJs 子组件未通过道具更新

Question

目标：通过从父级的非状态变量发送道具，仅重新渲染子组件。

我想只重新渲染没有父渲染的子组件。下面是我编写的示例代码。 cRoot 是 parent 传递 props，CButton 子组件需要在 Visibility 变量更改时渲染。

• 在子组件中，我没有使用过 state，因为它曾经是一次，我不想在 state 中保留该值。我也不想将 Child 创建为 Pure 组件。
• 在 parent 中，我想使用变量 (submitBtnVisibility) 作为 props 发送。

您能否解释一下为什么子组件没有更新，因为子组件的观点道具正在更新？或者指出我哪里出错了？

非常感谢您的帮助。

// Parent Component 

class Root extends React.Component {
  constructor(props) {
    super(props);
    this.state = { refresh: true };
    // Parents non-state variable.
    this.submitBtnVisibility = { visibility1: 1, visibility2: 2 };

  }

  componentDidMount() {
    console.log("Root componentDidMount ");
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("Root componentDidUpdate ", prevProps, prevState);
  }

  handleonclick = () => {
    console.log(" Root Btn Clicked");
    //this.setState({ var1: 5 });  -> If I enable this line , child is getting rendered
    this.submitBtnVisibility.visibility1 = 5;
  };
  render() {
    console.log(" Root Render ");

    return (
      <div className={classes.uploadContainerArea}>
        <Btncomponent visibility={this.submitBtnVisibility} />
        <button className={classes.btnroot} onClick={this.handleonclick}>
          {" "}
          Root Btn{" "}
        </button>
      </div>
    );
  }
}

// Child Component 

class Btncomponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { Btnprops: this.props.visibility };
  }

  componentDidMount() {
    console.log("Btncomponent componentDidMount ");
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("Btncomponent componentDidUpdate ", prevProps, prevState);
  }

  static getDerivedStateFromProps(props, state) {
    console.log(" getDerivedStateFromProps ");
    return null;
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log(" shouldComponentUpdate ");
    return true;
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(" getSnapshotBeforeUpdate ");
    return null;
  }
  render() {
    console.log(" Btncomponent Render ", this.props);

    return <button type="button"> {this.props.visibility.visibility1} </button>;
  }
}

Answer 1

想一想，你的 Child 组件如何重新渲染？如果它的道具或状态发生变化。好的，现在考虑一下您的父组件如何将更改后的道具传递给您的子组件？当它重新渲染时。

父组件如何重新渲染？当然，当它的状态发生变化时（或道具，但对于父级，现在没有任何道具）。所以，你没有改变父母的状态，它也不会重新渲染。因此，您的孩子不会重新渲染。很简单。

你不能渲染一个子组件，除非它在父组件之上获得新的道具。除非其状态（或道具）发生变化，否则父级不会重新渲染。在这里，你什么都没有做。

cmets 后更新

除非渲染父组件，否则无法渲染子组件。父母没有变化，孩子也没有重新渲染。

不怕渲染这么多。渲染本身并不昂贵，DOM 更改是。 React 比较 DOM（虚拟的和真实的），如果没有任何改变，它不会卸载/重新安装组件。

另外，我不知道您为什么不想使用PureComponent，但它提供了您想要的功能。除此之外，您也许可以使用shouldComponentUpdate，但大多数人不建议使用它，因为它还有其他缺点，如果使用不当，它会降低性能而不是降低性能。