javascript - 避免在 React 中的每个渲染器上重新计算变量

Question

我有一个组件 ParentToDataDisplayingComponent，它正在创建一些查找以帮助根据 ParentToDataDisplayingComponent 的父级访问的 redux 存储中的数据格式化子组件的数据。

我在重新渲染组件时有些滞后，其中不断变化的状态没有影响 this.props.dataOne 或 this.props.dataTwo - 这些中的数据lookups 保证与上次渲染相同，但不保证 props 中的数据在组件挂载时可用(从后端加载)。 mapPropsToDisplayFormat() 仅在所有通过 props 传入的数据可用后调用。

我想声明一次查找变量，并避免在每次重新渲染时重新keyBy()ing。

有没有办法在 ParentToDataDisplayingComponent 组件中执行此操作？

export default class ParentToDataDisplayingComponent extends Component {

  ...     

  mapPropsToDisplayFormat() {
    const lookupOne = _(this.props.dataOne).keyBy('someAttr').value();
    const lookupTwo = _(this.props.dataTwo).keyBy('someAttr').value();

    toReturn = this.props.dataThree.map(data => 

      ... // use those lookups to build returnObject

    );

    return toReturn;
  }

  hasAllDataLoaded() {
    const allThere = ... // checks if all data in props is available
    return allThere //true or false
  }

  render() {
    return (
      <div>

        <DataDisplayingComponent
          data={this.hasAllDataLoaded() ? this.mapPropsToDisplayFormat() : "data loading"}
        />
      </div>
    );
  }
}

Answer 1

将所有数据加载的结果保存到组件的状态。

export default class ParentToDataDisplayingComponent extends Component {

  constructor(props) {
    super(props)
    this.state = { data: "data loading" }
  }    

  componentWillReceiveProps(nextProps) {
    // you can check if incoming props contains the data you need.
    if (!this.state.data.length && nextProps.dataLoaded) {
      this.setState({ data: mapPropsToDisplayFormat() })
    }
  }

  ...

  render() {
    return (
      <div>
        <DataDisplayingComponent
          data={this.state.data}
        />
      </div>
    );
  }
}

我认为，根据您在 props 中检查的内容来查看数据是否已完成加载，您可以使用 shouldComponentUpdate 来获得类似的结果，而无需保存本地状态。

export default class ParentToDataDisplayingComponent extends Component {

shouldComponentUpdate(nextProps) {
  return nextProps.hasData !== this.props.hasData
}    

mapPropsToDisplayFormat() {
  ...

  toReturn = data.props.dataThree
    ? "data loading"
    : this.props.dataThree.map(data => ... )

  return toReturn;
}  

  render() {
    return (
      <div>
        <DataDisplayingComponent
          data={this.mapPropsToDisplayFormat()}
        />
      </div>
    );
  }
}