data.map() 在 ReactJs 组件中的哪里？

Question

我需要使用 react-table 库可视化来自 props.signalsData 数组的数据（该数组存储在父组件状态中）。

此数组中的项目如下所示：

{
  signal: {
    name: 'Signal 1',
    type: 'input'
  }
}

所以，我需要先映射它：

const data = signalsData.map(siglalItem => siglalItem.signal);

但是，我不想在 render 方法中执行此操作（每次调用 rendor 方法时创建一个数组在性能方面不是最佳解决方案？！）。

我也不想将它存储在状态中，因为在状态中设置道具是反模式的。

数组可以从其他组件更改。

有哪些替代方案？

Answer 1

使用 React 生命周期。

OPTION 1
/* called before render */
componentWillMount() {
  const data = signalsData.map(siglalItem => siglalItem.signal);
}

OPTION 2
constructor(props) {
  super(proprs);
  this.state = {
    loaded: false;
  }
}
/* called after render */
componentDidMount() {
 const data = signalsData.map(siglalItem => siglalItem.signal);
 this.setState({ loaded: true });
}

render() {
  const {loaded} = this.state;
  return (
    lodaded && <div> ...YOUR TABLE COMPONENT... </div>
  );
}

OPTION 3 (best option)

Use redux.

Answer 2

这可能是过早优化的情况。在render里有map没什么问题，如果数组不大，速度很快。

收到道具时会产生一个状态，getDerivedStateFromProps就是为了这个：

static getDerivedStateFromProps({ signalsData }) {
  return { signals: signalsData.map(...) };
}

这可能不会带来性能改进，因为它也会在组件更新时触发。

如果此组件中仅从 signalsData 使用了 signals，这意味着向其提供了过多的数据，并且 signalsData.map(...) 应该出现在父组件中。

data.map() 在 ReactJs 组件中的哪里？

Where to do data.map() in ReactJs component?

reactjs

react-props