reactjs – 如何区分导致React组件渲染的原因：来自组件内部或外

发布时间：2020-12-15 09:35:22 所属栏目：百科来源：网络整理

导读：我有两个嵌套的反应组件：外部和内部.每当我调用Inner的setState时,都会调用内部组件的渲染.此外,每当我调用外部组件的setState时,都会调用外部和内部组件的render函数. 我想区分这两种情况并检测内部组件的渲染.我的内部渲染功能应该根据具体情况而有所不同

我有两个嵌套的反应组件：外部和内部.每当我调用Inner的setState时,都会调用内部组件的渲染.此外,每当我调用外部组件的setState时,都会调用外部和内部组件的render函数.
我想区分这两种情况并检测内部组件的渲染.我的内部渲染功能应该根据具体情况而有所不同.我怎样才能做到这一点？

解决方法

您可以利用componentWillReceiveProps仅在组件接收新道具时调用的事实(请在此处查看： http://busypeoples.github.io/post/react-component-lifecycle/),而不是在调用setState时调用,更重要的是它们甚至不必是与现有道具不同的道具(根据 https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).所以你应该能够做一些事情

componentWillReceiveProps() {
  this.setState({parentUpdated: true});
}

render() {
  if (this.state.parentUpdated) {
    // Render one way
  } else {
    // Render the other way
  }
}

虽然您还需要在渲染之后以某种方式取消设置,或者只是确保对this.setState的每次调用都包含{parentUpdated：false}.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!