Question

0.13和0.14中的文档都警告说变异风格已被弃用，但不提及为什么

不推荐在渲染之间重复使用和改变样式对象

如果我想对基于类的动画无法处理的元素执行依赖于状态的动画，我该怎么办？每次克隆对象？

新的反应，帮助和建议非常感谢

Answer 1

您可以通过将以前的样式复制到新变量并复制上一个样式对象来解决此问题。

示例：

不允许

const {styleFromProps} = this.props; const newStyle = styleFromProps['marginTop'] = '45px';

<强> 允许

const {styleFromProps} = this.props; const newStyle = {...styleFromProps, marginTop: '45px'};

这样，你不会改变任何东西，只是从前一个创建一个新对象（即styleFromProps）

Answer 2

查看测试用例/预期错误，您是正确的，应该克隆该对象。

Warning: `div` was passed a style object that has previously been
mutated. Mutating `style` is deprecated. Consider cloning it
beforehand. Check the `render` of `App`. Previous style:
{border: "1px solid black"}. Mutated style:
{border: "1px solid black", position: "absolute"}.

https://github.com/facebook/react/blob/fc96f31fade8043856eb7bc34c56598c4a576110/src/renderers/dom/shared/tests/ReactDOMComponent-test.js#L128

我猜它与道具的推理相似 - 它可以避免你在各地传递一个可变的样式对象，最终失去了很多易于推理的反应，React非常善于帮助你。

The props object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, React.cloneElement should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.

Answer 3

解决这个问题很简单。

糟糕的方式

<div style={this.props.style} />

好方法

<div style={{ ...this.props.style }} />

为什么变异风格被弃用了？

3 个答案: