React渲染中的解构状态

Question

我看到很多示例显示了一个看起来像这样的React组件：

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}