react native - 将状态分配给 const

Question

我从 React Native 开始，在使用名为 React Native paper 的库时，我遇到了一个声明，其中状态被分配给 const，如下所示。

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={firstQuery}
      />
    );
  }
}

'Render' 方法的开头，您可以看到 const { firstQuery } = this.state; 有人可以解释为什么将状态分配给名为 'firstQuery' 的常量，即使有原因，分配将如何正确地将状态对象中的属性 'firstQuery' 映射到常量 ?

提前致谢。代码示例来自https://callstack.github.io/react-native-paper/searchbar.html#value

Answer 1

该语法既不是 React 也不是 React Native。这只是 Javascript 的语法，称为解构。

const { firstQuery } = this.state;

等同于

const firstQuery = this.state.firstQuery;

只是一个简写语法，你看2 firstQuerys？人们就是不想要代码中的重复，所以他们发明了它。

查看下面的 vanilla javascript 片段：

const object = {
  name: 'Aby',
  age: 100,
}

const { name, age } = object;
// instead of 
// const name = object.name;

console.log(name, age);
console.log(object.name, object.age);

//=========================================
// imagine:
const obj = {
  veryLongPropertyNameToType: 420
}

const { veryLongPropertyNameToType } = obj;
// instead of
// const veryLongPropertyNameToType = obj.veryLongPropertyNameToType;

Answer 2

就像提到的另一个答案一样，它只是 JavaScript 语法，也就是解构。如果您感到困惑并希望只使用 "vanilla" JavaScript 语法，您可以看看下面的内容。

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={this.state.firstQuery} // <<<<<<<<<<< LOOK HERE
      />
    );
  }
}

react native - 将状态分配给 const

react native - assigning state to const

javascript

reactjs

react-native

react-native-paper