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

优点：代码看起来更简洁，尤其是当您需要在组件中多次重用状态值时。

缺点：如果你正在制作一个模块或开源你的代码，被破坏的语句可能会导致混淆。