Javascript 使子对象在父对象状态更改时不刷新

这就是我的问题。我有一个根组件，其中包含导航和切换，每个组件都在我的页面中。导航是从左侧滑入滑出的，我这样做的方式是，更改根组件中的状态，将道具传递给，并决定是否应该向导航添加类。问题是，我的应用程序中的每个组件在打开/关闭nav时都会重新渲染。这是我的根组件：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      navOpen: false
    }
  }
  toggleNav = () => {
    this.setState({
      navOpen: !this.state.navOpen
    })
  }
  closeNav = (e) => {
    if (this.state.navOpen) {
      this.setState({navOpen: false})
    }
  }

  render() {
    return (
      <main>
        <Header/>
        <Hamburger navOpen={this.state.navOpen} toggleNav={this.toggleNav}/>
        <Navigation navOpen={this.state.navOpen} toggleNav={this.toggleNav}/>
        <section className="container-fluid content" onClick={this.closeNav}>
          <Switch>
            <Route path="/add-recipe/:groupId?" component={NewRecipe}/>
            <Route path="/recipes/:page?/:sortType?/:size?" component={RecipeList}/>
            <Route path="/recipe/:id" component={Recipe}/>
            <Route path="/sign/" component={SignForm}/>
            <Route path="/user/:id" component={User}/>
          </Switch>
        </section>
      </main>

    );
  }
  componentDidMount() {
    this.props.userActions.getUser(this.props.url);
  }
}

function mapStateToProps(state) {
  return {url: state.url.url, user: state.user.loggedUser}
}

function mapDispatchToProps(dispatch) {
  return {
    userActions: bindActionCreators(userActions, dispatch)
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

---

但这并没有改变任何事情。当我打开导航道具的路线保持不变，但他们仍然重新招标。我试图将“navOpen”状态移动到navigation，并通过“ref”从根组件打开它，但每次调用它的方法时，我都会得到“无法读取null的属性'toggleNav'”

您可以通过在受影响的组件上实现

shouldComponentUpdate

来防止重新渲染。不过要注意，渲染并不意味着DOM正在更改。react中的呈现意味着react将创建其内部节点树的新副本，并将其与DOM进行比较，以确定是否需要更新它，以及在何处进行更新。因此，不要担心重新渲染，除非您的组件创建成本很高（即，它执行对后端的请求或设置了大量动画）

您可能需要查看shouldComponentUpdate生命周期方法：这可能有助于详细回答您的问题。可能重复的

shouldComponentUpdate(nextProps, nextState) {
    // console.log(this.props)
    // console.log("next")
    // console.log(nextProps)
    if (this.props == nextProps) {
      return false
    }
    return true
  }