React 子组件在重新渲染时失去动画

Posted 2023-03-06

【中文标题】React 子组件在重新渲染时失去动画

【英文标题】：React child component loses animation upon re-render

【发布时间】：2020-05-03 15:57:42

【问题描述】：

我有一个使用 Material UI 的 React 应用程序，该应用程序带有一个如下所示的组件（我们可以称之为 DatePicker），为了演示目的而偷偷改变了。

Material UI 为点击和其他与其组件的交互设置动画。当单击已选择的单选按钮或不改变状态的“时间按钮”时，此动画在上方可见。但是，当这样的点击改变状态时，动画就会中断。

我可以从技术角度理解为什么会发生这种情况； DatePicker 组件调用 setMinutes，这是从其父级（状态所在的位置）传入的属性。这是一个React.useState 变量，然后更新其对应的minutes 变量。然后将分钟传递给DatePicker，由于道具更改而重新渲染。

如果状态存在于DatePicker 内，那么这个问题不应该出现；然而，DatePicker 是一个更大的表格的一部分，它规定了父表格的内容。要为该表生成行，父级必须具有此信息。

以下是父级的示例重建：

const Parent = () => 
    const [minutes, setMinutes] = React.useState(15);
    const [radioOption, setRadioOption] = React.useState('Thank You');
    // Many other state variables here to hold other filter information

    return (<div>
        <DatePicker minutes=minutes setMinutes=setMinutes radioOption=radioOption setRadioOption=setRadioOption/>
    </div>);
;

这里是DatePicker的样本重建：

const DatePicker: React.FC<DatePickerProps> = props => 
    const minutes, setMinutes, radioOption, setRadioOption = props;
    return (<div>
        <Radios value=radioOption onChange=val => setRadioOption(val)/>
        <Minutes value=minutes onChangeval => setMinutes(val)/>
    </div>);
;

我不确定在这种情况下最佳做法是什么，但我有一种明显的感觉，那就是不是这样。有人有建议吗？提前致谢！

【问题讨论】：

请提供一个code sandbox 来重现您的问题。

【参考方案1】：

感谢您的评论，瑞恩·科格斯韦尔。我确实创建了一个代码沙箱，发现问题不在于 React 状态管理，而在于我正在做的事情超出我在问题中提供的内容。

我使用withStyles HOC 来包装我的组件，其方式类似于const StyledDatePicker = withStyles(styles)(DatePicker)。然后我使用该样式元素并在其上放置属性（minutes 等）。

事实证明，使用无样式的DatePicker 可以解决此问题。我进一步解决了这个问题，发现我在父级的“渲染”方法中创建了“样式化”组件，这意味着每次道具更改被推到链上时，父级将重新渲染并且整个“样式化”组件类型将被再次创建（或者我相信）。这会破坏引用完整性，这解释了“删除并重新创建”行为。

这教给我们宝贵的一课，那就是让组件保持小型化并使用代码沙箱进行故障排除。再次感谢！

对于任何感兴趣的人，这里是用于测试的Code Sandbox。

【讨论】：

感谢您的跟进。但是，在仍然使用 withStyles HOC 包装器的同时有没有办法解决这个问题？另一个用户遇到了差异问题，但根本原因相同：***.com/questions/56719846/…