反应本机语法

Question

请原谅菜鸟的问题，但是当我浏览 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;

这是一个不错的 shorthand 方法。当然，解构比这更强大，Mozilla 文档提供了更多示例。

第二：ES6 箭头函数（或胖箭头函数）的例子

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

优点是编写的代码较少，但关键区别在于箭头函数中的 'this' 与写入它的上下文相同 'this' 。换句话说，你不需要不必再使用 bind() 了。

糟糕的过去：

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

反应本机语法

React Native Syntax

react-native