React中点击切换Grid布局时如何实现无重渲染的平滑动画？

• 避免组件重渲染：将gridArea为b的组件用React.memo包裹，或者确保它是纯组件。只要传递给该组件的props不随diffFormat状态变化，组件就不会触发重渲染——因为styled组件的样式变化是通过CSS类切换实现的，不会影响子组件的props传递。

• 实现平滑动画的核心技巧：CSS不支持直接对grid-template-areas属性做过渡动画，因此需要转而对数值型的网格属性做动画：

  1. 给网格容器的grid-template-rows和grid-template-columns添加过渡效果，动态切换行列数量：

     const StyledGridContainer = styled(Grid)(({ diffFormat }) => ({
       display: 'grid',
       gap: '16px',
       // 根据diffFormat切换行列数，添加过渡
       gridTemplateRows: diffFormat ? 'repeat(4, 1fr)' : 'repeat(8, 1fr)',
       gridTemplateColumns: diffFormat ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
       transition: 'grid-template-rows 0.3s ease, grid-template-columns 0.3s ease',
     }));
     

  2. 给gridArea b对应的组件，动态设置grid-row-start、grid-row-end、grid-column-start、grid-column-end这些数值属性，并添加过渡：

     const StyledAreaB = styled(Box)(({ diffFormat }) => ({
       // 根据diffFormat切换区域的行列起止位置
       gridRowStart: diffFormat ? 1 : 3,
       gridRowEnd: diffFormat ? 3 : 7,
       gridColumnStart: diffFormat ? 1 : 2,
       gridColumnEnd: diffFormat ? 3 : 4,
       transition: 'grid-row-start 0.3s ease, grid-row-end 0.3s ease, grid-column-start 0.3s ease, grid-column-end 0.3s ease',
       // 其他样式
       backgroundColor: '#f0f0f0',
     }));
     

• 关键注意事项：

  • 不要依赖grid-template-areas做动画，必须用数值型的行列属性替代，因为CSS仅支持可计算的数值属性过渡。
  • 确保diffFormat状态仅作为styled组件的props传递，不传递给StyledAreaB内部的子组件，避免触发不必要的重渲染。
  • 过渡时长和缓动函数可以根据需求调整，比如把0.3s改成0.5s，ease改成cubic-bezier(0.4, 0, 0.2, 1)。

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