React项目添加动态状态时点击emoji触发MUI Modal页面卡顿如何解决

点击emoji后页面卡顿通常是以下几种常见原因导致：

• 列表渲染未加唯一标识：你在映射emojipedia.js的数组生成EmojiContainer列表时，没有给每个子项加唯一的key属性，React在触发更新执行diff算法时需要遍历全量列表计算差异，耗时过长阻塞主线程。
• 状态管理不合理：如果将Modal的打开/关闭状态定义在每个EmojiContainer子组件内部，点击触发状态更新时会导致全量emoji子组件重渲染，emoji数量较多时就会直接卡住。
• Modal渲染逻辑冗余：Modal打开时错误加载了全量emoji的说明数据而非仅当前选中的单条数据，大量无用计算占用主线程资源。
• 回调函数未缓存：如果给EmojiContainer传递的点击回调是每次渲染都重新生成的匿名函数，会导致所有子组件都触发不必要的重渲染。

• 给列表项添加唯一key：映射数组时使用每个emoji的唯一id或者唯一名称作为key属性，不要用数组索引作为key。
• 状态提升到父组件：在父组件中统一管理Modal的开闭状态、当前选中的emoji数据，EmojiContainer组件只接收展示需要的静态属性和点击回调，点击时仅更新父组件的选中emoji和Modal状态，Modal组件放在父组件层级渲染，只读取当前选中的单条emoji说明。
• 优化渲染性能：用React.memo包裹EmojiContainer组件，避免非必要重渲染；点击回调用useCallback做缓存，避免每次父组件渲染都生成新的回调实例。
• 精简Modal内部逻辑：确认Modal仅渲染当前选中的单条emoji的说明内容，去掉多余的循环、计算逻辑。

内容的提问来源于stack exchange，提问作者curious