《模态框最佳实践的一点学习》——2021-07-28

[isbaselvy]

原文地址：https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/2.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%A8%A1%E6%80%81%E6%A1%86%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E3%80%8B.md

当模态框出现在循环列表中，往往会引发首屏触发 2-30 次模态框初始化运算，而这些运算最佳状态是模态框显示时执行一次

所以，模态框不用写在循环里。比如v-for渲染的列表，每一项item的组件里不要加模态框，最好提出来放循环外层

——可是为啥项目里的总是组件套小组件，要提出来还得向上走两层。啊，不想改。算了明天改吧

react示例： 下面看似没问题的代码往往会引发性能危机：

const TdElement = data.map(item => {
  return (
    <Td>
      <Button>详情</Button>
      <Modal show={item.show} />
    </Td>
  )
});

上面代码初始化执行了 N 个模态框初始化代码，显然不合适。对于 table 操作列中触发的模态框，所有行都对应一个模态框，通过父级中一个状态变量来控制展示的内容：

class Table extends Component {
  static state = {
    activeItem: null, 
  };

  render() {
    const { activeItem } = this.state;

    return (
      <div>
        <Modal show={!!activeItem} data={activeItem} />
      </div>
    );
  }
}