Question

这个问题可能看起来有点老套，但是我不明白它的工作方式，我不得不在这里问它，看下面的代码，它是一个简单的React组件：

const title = React.createElement(
    'h1',
    {id: 'title', className: 'header'},
    'Hello World'
)

ReactDOM.render(
    title,
    document.getElementById('react-container')
)

现在，我们将createElement和render方法定义为常量或以某种方式创建快捷方式：

const { createElement } = React;
const { render } = ReactDOM;

const title = createElement(
    'h1',
    {id: 'title', className: 'header'},
    'Hello World'
)

render(
    title,
    document.getElementById('react-container')
)

我不明白它是如何工作的以及如何将常量名称与React对象相关联，如果有人向我解释它，我将不胜感激。

Answer 1

据我了解，令人困惑的部分是ES6语法。

const { createElement } = React;

转为

var createElement = React.createElement;

用法完全一样。

Answer 2

这称为对象解构，基本上，您可以在React类中获取一个对象，然后从对象本身中挑选出属性（方法和变量），并在没有命名空间的情况下使用它们。

更多有关对象分解的信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

考虑您有一个这样的对象：

const Bob = {
  age: 12,
  name: 'Bob',
  height: 72
}

好吧，如果我们只想要Bob的age属性，我们通常必须做Bob.age，但是如果我们想一遍又一遍地使用相同的属性，这可能会有些笨拙，因此我们可以对其进行分配到变量：

const age = Bob.age;

但是，如果我们要鲍勃的一些财产而不是他全部财产怎么办？好吧，使用变量虽然不错，但是代码很多，因此我们可以通过使用对象分解来减少代码量，并选择所需的代码。

const age = Bob.age;
const height = Bob.height;
// vs
const { age, height } = Bob;

将javascript类Method定义为常量

2 个答案: