Question

我正在处理有关父组件渲染两次和子组件渲染两次的问题。父级的现有代码为

<childform
  value ="name"
  serverapi={this.valueservice.api}
  update={this.update}
/>

子组件开始使用

渲染

componentDidMount()
{
   this.callservice(serverapi)
}

由于两次调用了componentDidMount函数，因此该API也会渲染两次，因此必须避免，每次父渲染子状态时都会刷新，因此我无法与该状态进行比较，是否有可能对此进行检查或解决我可以参考的问题？可以解决我调用父级调用API一次的次数

Answer 1

您传递给require 'json' def str_to_ary JSON.parse(@to_convert) end的更新属性似乎是一个布尔值，指示是否应重新渲染组件。如果是这种情况，您可以使用childform生命周期方法检查是否有更新，并且只有在为true时才重新渲染：

shouldComponentUpdate()

您可以在此处找到更多信息：

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 2

您可以拥有一个名为cache的全局变量。

此缓存的作用是检查是否曾经调用过your_awesome_api。

下面的代码是一种常用方法：

// cache.js
let cache = {};

export default cache;

// someComponent.js
import cache from './cache';

// ...ignore some react component code...

componentDidMount() {
  if (cache['your_awesome_api']) {
    doSomething(cache['your_awesome_api'])
  } else {
    this.callservice(your_awesome_api).then(result => {
      cache['your_awesome_api'] = result
    })
  }
}

这样，您无需担心重新渲染问题！

react中的重新渲染真的很常见！

如果父组件多次渲染，是否有可能控制子组件的反应？

2 个答案: