解构状态作出反应呈现

Question

我看到很多的例子展示了一个阵营组成，看起来像这样：

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看起来更干净，但似乎很难知道变量来自组件状态。在最佳实践方面是否有任何好处，还是仅仅是偏好？

谢谢。

Answer 1

优点：代码看起来更清洁，特别是如果您需要在组件中多次重复使用状态值。

缺点：如果你正在制作一个模块或者开源代码，那么破坏性陈述可能会导致混淆。

Answer 2

如果您多次使用相同的变量，您缺少const { foo, bar } = this.state;代码看起来更清洁。在这种情况下，我不会破坏状态

Answer 3

也容易使用解构

const { foo, bar } = {...this.state}