Javascript ReactJs子组件未通过道具更新

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

我想只重新渲染子组件而不渲染父组件。下面是我编写的示例代码。cRoot是传递道具的父组件，CButton子组件需要在可见性变量更改时呈现

• 在子组件中，我没有使用state，因为它只使用了一次，我不想将该值保留在state中。另外，我不想创建一个纯组件
• 在parent中，我想使用变量（submitBtnVisibility）作为道具发送

您能解释一下为什么子组件没有得到更新，因为子组件视角道具正在得到更新吗？或者指向我哪里出错了

非常感谢你的帮助

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

//父组件
类根扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={refresh:true}；
//父对象是非状态变量。
this.submitBtnVisibility={visibility1:1，visibility2:2}；
}
componentDidMount（）{
log（“根组件didmount”）；
}
componentDidUpdate（prevProps、prevState）{
log（“根组件diddupdate”，prevProps，prevState）；
}
handleonclick=（）=>{
日志（“根Btn已单击”）；
//this.setState（{var1:5}）；->如果我启用这一行，子对象将被渲染
this.submitBtnVisibility.visibility1=5；
};
render（）{
console.log（“根渲染”）；
返回(
{" "}
根Btn{“}
);
}
}
//子组件
类Btncomponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={Btnprops:this.props.visibility}；
}
componentDidMount（）{
log（“btncomponentcomponentdidmount”）；
}
componentDidUpdate（prevProps、prevState）{
log（“btncomponentcomponentdiddupdate”，prevProps，prevState）；
}
静态getDerivedStateFromProps（props，状态）{
log（“getDerivedStateFromProps”）；
返回null；
}
shouldComponentUpdate（下一步，下一步状态）{
日志（“shouldComponentUpdate”）；
返回true；
}
getSnapshotBeforeUpdate（prevProps，prevState）{
log（“getSnapshotBeforeUpdate”）；
返回null；
}
render（）{
log（“Btncomponent Render”，this.props）；
返回{this.props.visibility.visibility1}；
}
}

想想看，您的子组件如何重新渲染？如果它的道具或状态改变。好的，现在想想父组件如何将其更改的道具传递给子组件？当然，当它重播时

父组件如何重新渲染？当然，当它的状态改变时（或者道具，但对于父对象，现在没有任何道具）。因此，您不会更改父对象的状态，也不会重新渲染。因此，您的孩子不会重新渲染。虽然很简单

除非子组件在父组件之上获得新的道具，否则无法渲染它。父对象不会重新渲染，除非其状态（或道具）发生更改。在这里，你没有做这些

评论后更新

除非渲染父组件，否则无法渲染子组件。父级无更改，子级无重新渲染

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

---

另外，我不知道您为什么不想使用

PureComponent

，但它提供了您想要的功能。除此之外，您可以使用

shouldComponentUpdate

也许，但大多数人不建议使用它，因为它还有其他缺点，如果使用不当，它会降低性能，而不是降低性能。

完全同意devserkan！！但是考虑一个场景，其中父组件（比如）有10个子组件。然后在父级渲染时，所有10个子级都将重新渲染。若我的目标是只渲染一个子元素，在其余的9个组件中，我需要编写额外的代码（prev props未更改等，以避免重新渲染）。那么，在没有父级渲染的情况下，是否只需要重新渲染特定于目标的子级？作为reactjs的新手，我只是想知道。但我完全理解你的解释。欢迎你，也欢迎你来SO，祝你旅途好运：）