解构状态作出反应呈现
问题描述:
我看到很多的例子展示了一个阵营组成,看起来像这样:解构状态作出反应呈现
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = {
foo: 'foo',
bar: 'bar'
}
}
render() {
const { foo, bar } = this.state
return <Text>{foo}{bar}</Text>
}
}
正如你可以看到,该组件的状态已经被解构。我可以看到JSX看起来更干净,但似乎很难知道变量来自组件状态。在最佳实践方面是否有任何好处,还是仅仅是偏好?
谢谢。
答
优点:代码看起来更清洁,特别是如果您需要在组件中多次重复使用状态值。
缺点:如果你正在制作一个模块或者开源代码,那么破坏性陈述可能会导致混淆。
答
如果您多次使用相同的变量,您缺少const { foo, bar } = this.state;
代码看起来更清洁。在这种情况下,我不会破坏状态
答
也容易使用解构
const { foo, bar } = {...this.state}
更新的问题,这要归功于创建源不可改变的数据! –