react-native - 反应本机语法

Question

请原谅 noobie 的问题，但是当我浏览 react native 文档时，与常规 javascript 存在语法差异。我试图找出描述语法的文档在哪里。

例如这个语句

var {
  ActivityIndicatorIOS,
  StyleSheet,
  View,
} = React

以及 => 运算符的使用

  setToggleTimeout: function() {
    this.setTimeout(
      () => {
        this.setState({animating:     !this.state.animating});
        this.setToggleTimeout();
      },
      1200
    );
  },

Answer 1

这些是 ECMAScript 6 的特性

您的第一个示例是解构分配

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

第二个是箭头函数

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

上面接受的答案是正确的，但这里有一些例子：

首先：一个 ES6 解构的例子：

var {
  ActivityIndicatorIOS,
  StyleSheet,
  View,
} = React

完全类似于：

var ActivityIndicatorIOS = React.ActivityIndicatorIOS;
var StyleSheet = React.StyleSheet;
var View = React.View;

这是一个很好的速记方法。当然，解构比这更强大，Mozilla 文档提供了更多示例。

2nd：一个 ES6 箭头函数（或粗箭头函数）的例子

setToggleTimeout: function() {
    this.setTimeout(
      () => {
        this.setState({animating:     !this.state.animating});
        this.setToggleTimeout();
      },
      1200
    );
  },

优点是编写的代码更少，但一个关键的区别是，在箭头函数中，“this”与编写它的上下文相同。换句话说，您不必再使用 bind() .

糟糕的旧时光：

setToggleTimeout: function() {
        this.setTimeout(
          function() {
            this.setState({animating:     !this.state.animating});
            this.setToggleTimeout();
          }.bind(this),
          1200
        );
      },