破坏反应呈现状态

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}