деструктурирующее состояния в React визуализаций

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

Advantage: Код выглядит намного чище, особенно если вам нужно повторно использовать значения состояния несколько раз в компоненте.

Недостаток: Если вы создаете модуль или открываете исходный код своего кода, разрушенное утверждение может вызвать недоумение.

Answer 2

Вам не хватает кода const { foo, bar } = this.state; выглядит намного чище, если вы используете одни и те же переменные несколько раз. В этом случае использования i wouldnt destruct state

Answer 3

также легко создавать неизменные данные из источника с помощью уничтожения того

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