React类组件如何避免重复调用calculations函数引发代码运行延迟

方案1：单次调用缓存返回值（最直接，无额外改造） #

你只需要调用一次calculations()函数，将返回的对象暂存到变量中，再按需提取属性即可，也可以直接用对象解构语法更简洁的完成赋值，只会执行一次计算逻辑：

// 写法1：先存返回值再逐个提取
const calcResult = this.calculations();
const myTest1 = calcResult.value1;
const myTest2 = calcResult.value2;
const myTest3 = calcResult.value3;

// 写法2：解构赋值一步完成，效果完全一致
const { value1: myTest1, value2: myTest2, value3: myTest3 } = this.calculations();

console.log(myTest1, myTest2, myTest3)

方案2：持久化缓存（适合多渲染周期复用场景） #

如果calculations()的计算逻辑很重，且依赖的state、props不会频繁变化，可以把计算结果缓存到类组件的实例属性中，避免每次组件渲染都重复执行计算：

class YourComponent extends React.Component {
  // 依赖的state/props变化时才重新计算更新缓存
  componentDidUpdate(prevProps, prevState) {
    // 此处替换为你实际的calculations依赖项判断
    if (prevState.paramA !== this.state.paramA || prevProps.paramB !== this.props.paramB) {
      this.calcCache = this.calculations();
    }
  }

  render() {
    // 优先读缓存，首次渲染时兜底执行一次计算
    const { value1: myTest1, value2: myTest2, value3: myTest3 } = this.calcCache || this.calculations();
    // 后续业务逻辑直接使用提取的变量即可
  }
}

原来的写法性能差的原因是你每写一次this.calculations()就会完整执行一遍整个计算逻辑，3次调用等同于跑了3遍计算流程，改为单次调用后只会执行1次计算，完全不需要使用hooks就可以解决延迟问题。

内容的提问来源于stack exchange，提问作者RoktSe