解構狀態作出反應呈現

Question

我看到很多的例子展示了一個陣營組成，看起來像這樣：

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}