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

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

解决这个问题非常简单.

糟糕的方式

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

好办法

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

Answer 3

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

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.