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

使用解构

从源创建不可变数据也很容易

final FirebaseDatabase database = FirebaseDatabase.getInstance();
final DatabaseReference commentsRef = database.getReference("comments");
Query query = commentsRef.orderByChild("attachphoto").equalTo()

React渲染中的解构状态

3 个答案: