reactjs - React 子组件在重新渲染时丢失动画

Question

我有一个使用 Material UI 的 React 应用程序，其组件(我们可以称之为 DatePicker)如下所示，出于演示目的偷偷更改。

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

我可以从技术角度理解为什么会发生这种情况； DatePicker 组件调用 setMinutes，这是从其父级(状态所在的位置)传入的属性。这是一个 React.useState 变量，然后更新其对应的 minutes 变量。然后将分钟传递到 DatePicker，它会因 prop 更改而重新呈现。

如果状态存在于 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} onChange{val => setMinutes(val)}/>
    </div>);
};

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

Answer 1

感谢您的评论，Ryan Cogswell。我确实创建了一个代码沙箱，发现问题不在于 React 状态管理，而在于我所做的超出我在问题中提供的内容。

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

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

这教导了保持组件小型化和使用代码沙箱进行故障排除的宝贵经验。再次感谢!

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