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

谢谢。

- Pav Sidhu

Answer 1

优点: 如果在组件中需要多次重用状态值，使用解构赋值可以使代码看起来更干净简洁。 缺点: 如果你正在制作一个模块或公开你的代码，使用解构赋值可能会导致困惑。

- Razvan Alex

Answer 2

你缺少了 const { foo, bar } = this.state; 这段代码，如果你需要多次使用同一个变量来清晰表达，那看起来会干净整洁一些。在这种情况下，我不会解构 state。

- Wojtek Szafraniec

Answer 3

使用解构也很容易从源代码创建不可变数据

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

- Pramendra Gupta