reactjs - 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

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

缺点:如果您正在制作模块或开源代码，则 destructed 语句可能会导致困惑。