在反应渲染中调用格式化函数是一种不好的做法吗?

Question

我有一个函数，如下所示：

const getTermsUrl = (list) => {
  const allianzInsurances = (list || []).filter(isAllianz)
  return get(first(allianzInsurances), 'productUrl', '')
}

还有一个带有渲染方法的组件，如下所示：

  ...
  render() {
    const { browser, list, selected, loading, invalidFields } = this.props
    // it`s bad practice to formating it in the render? 
    const termsAndConditionsProps = {
      browser,
      invalidFields,
      termsUrl: getTermsUrl(list), 
    }
    return (<TermsAndConditions {...termsAndConditionsProps} />)
  }
  ...

我的问题是：在渲染过程中格式化termsAndConditionsProps是一种不好的做法吗？还是将格式化版本保留在本地状态和构造函数中的格式更好？

Answer 1

可以使用轻量级格式化函数并在组件的渲染方法中调用它们。如果您的道具没有改变，那么在构造函数中移动此类计算是有意义的。但在上面的情况下，每次更新 list 属性时，您的组件都会重新渲染。所以在这种情况下没关系。