javascript - 在 react 渲染中调用格式化函数是不好的做法吗？

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

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