在ReactJs组件中执行data.map（）的位置？

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

此数组中的项看起来像：

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

因此，我首先需要绘制地图：

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

但是，我不想在render方法中这样做（每次rendor方法调用时创建数组并不是性能方面的最佳解决方案？！）

另外，我不想将其存储在状态中，因为在状态中设置道具是反家长的

阵列可以从其他komponent更改

有哪些替代方案？

使用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.

选项1
/*渲染前调用*/
组件willmount（）{
const data=signalsData.map（siglalItem=>siglalItem.signal）；
}
选择2
建造师（道具）{
超级（proprs）；
此.state={
加载：false；
}
}
/*渲染后调用*/
componentDidMount（）{
const data=signalsData.map（siglalItem=>siglalItem.signal）；
this.setState（{loaded:true}）；
}
render（）{
const{loaded}=this.state；
返回(
lodaded&…您的表组件。。。
);
}
方案3（最佳方案）
使用redux。

这可能是一种过早优化的情况。在

渲染

中使用

映射

没有什么错，如果数组不大，它的速度会非常快

当收到道具时会产生一种状态，

getDerivedStateFromProps

用于：

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

这可能不会导致性能的提高，因为它也会在组件更新时触发

---

如果此组件中仅使用来自

signalsData

的

signals

，这意味着向其提供了过多的数据，并且父组件中应出现

signalsData.map（…）

。

选项1-使用组件Willmount不安全。选项2-没问题。但我需要检查信号数据是否在其他生命周期方法中发生了更改。这是真的，选项1是不安全的，我不知道。因此，请使用选项2和componentDidUpdate（prevProps，prevState）。这就是为什么选项3更好的原因，如果数据发生变化，dispatch会自动检测