javascript - 关于大括号的 jsx 语法

Question

First one

我对花括号的使用感到困惑。 const { a } = { b : 5 };

这段代码发生了什么。

我把它放到babel中，它翻译成javascript。

在 JavaScript 中，

let a = { b : 5 };

let b = a.b;

在 JavaScript 中，我可以说

1. 声明 a 并引用对象{b:5}

2. 然后声明 b 并引用对象 a = {b:5} 的值，属性 b: 5

但是当我看到 const { a } = { b : 5 }; 时，我对它没有任何意义。

我对此无话可说。

我了解 {} 在 javascript 表达式中的使用。但是，我还是看不懂。

Another one is below

import React, { Component } from "react";

class Welcome extends Component;

和

import React from 'react';

class Welcome extends React.Component

我不确定上面的代码是否正确。只是大括号让我困惑。

因为第二行

扩展组件；

扩展 React.Component;

我不知道花括号是怎么回事。

Answer 1

解构是一种 javaScript 功能，它允许我们从数组或对象中提取多条数据并将它们分配给自己的变量。

解构在类组件中的工作方式类似，但语法略有不同。

class Attraction extends React.Component {
  render() {  
   return (
      <div>
        <h1>Hello</h1>
      </div>
    );
  }
}

解构使这段代码更加干燥并且更易于阅读。