ECMA 6、React Native 和 Redux：这个语法糖是什么意思？ [关闭]

Question

我在查看react native redux example 项目时提出了很多问题。谁能指出我将解释这些高级语法糖的文档？

例如：

import React, { AppRegistry } from 'react-native';

为什么在 {} 中有 AppRegistry，React 的导入和 AppRegistry 的导入在功能上有什么区别？

这个导入语句会发生什么：

import * as types from '../actions/actionTypes';

它们会作为数组导入吗？

另一件事：

  render() {
    const { state, actions } = this.props;
    return (
      <Counter
        counter={state.count}
        {...actions} />
    );
  }

什么将传递给 Counter-Component？动作变量是从哪里来的？它从 this.props 中被破坏，但在调用者中不会传递任何内容。另外：

中的扩展运算符

<Counter/>

，这是否会附加另一个参数，因为它们会以逗号分隔的变量名传递？

另一件事：

export default function counter(state = initialState, action = {}) {
  switch (action.type) {
    case types.INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };

return 语句真正返回的是什么？扩展运算符和一个名为“count”的属性，如果扩展运算符已经包含一个名为“count”的变量，它们是否会合并在一起？

此外，该项目在 reducers 文件夹中包含一个名为 index.js 的简单文件，其内容如下：

import counter from './counter';

export {
  counter
};

有意义吗？

我问这个项目是因为这个项目被命名为在 react native 中使用 redux 的示例应用程序，但我认为它是为了学习目的而完成的。而且我不确定，在结构上是否一切都有意义。但我真正的问题是澄清我在那里找到的这些句法糖元素

Answer 1

这是很多问题；其中大部分与 React/Redux 无关；他们真的是关于 EcmaScript 2015/2016/next。也许您想重新表述您的问题？无论如何，这是我的两分钱：

为什么在 {} 中有 AppRegistry，React 的导入和 AppRegistry 的导入在功能上有什么区别？

这个导入语句会发生什么：

这里是关于ES2015 imports的一点解释。考虑两个文件：

// A.js
export default 1;
export const two = 2;

// B.js
import one from "./A";
import { two } from "./A";
console.log(one); // 1
console.log(two); // 2

这（大致）执行如下：

// A.js
module.exports = {
    default: 1,
    two: 2
};

// B.js
var one = require("./A").default;
var two = require("./A").two;

你会注意到，在 ES2015 中，花括号可以用在 import 语句中，表示你只想导入特定的导出，而不是整个模块 .

如果省略花括号，则只会导入 default 导出。

您还可以使用星号 将所有导出导入（即默认导出和所有其他命名导出）到一个绑定中。例如，

import * as everything from "./A";

应该或多或少地转换成：

var everything = require("./A");

现在，everything 是一个绑定到每个导出的对象，如上所示。 因此，everything.default === 1 和 everything.two === 2。

什么将传递给 Counter-Component？

只有state.count 和所有actions 的参数列表。

return 语句真正返回的是什么？

对象

{
    ...state,
    count: state.count + 1
}

包含一个object spread property。假设state是

{
    a: 1,
    b: 2
}

它将转换为：

{
    a: 1,
    b: 2,
    count: state.count + 1
}

此外，该项目在 reducers 文件夹中包含一个名为 index.js 的简单文件，其内容如下 [...] 有意义吗？

导入模块只是为了导出它们可以在不应直接导入内部结构的项目中有意义。我没有看过这个特定的项目，所以我不适合判断这在这个项目中是否有意义；反正也有shorter syntax for that：

export { counter } from "./counter";

Answer 2

代码形式的简要总结：

// the same:
let { propertyName } = { propertyName: 1, otherPropertyName: 2 };
var propertyName = { propertyName: 1, otherPropertyName: 2}.propertyName;


import * as types from '../actions/actionTypes';
var types = require('../actions/actionTypes');
// where "types" is set to the "exports" object in actionTypes.js


// essentially "spreads" or merges all of state's values into the object
let obj = {
    ...state,
    count: state.count + 1
};
var obj = _.merge( state, {count: state.count + 1 } );  //underscore merge
var obj = Object.assign( state, {count: state.count + 1 } );  //ES6 Object.assign function for merging
// for loop merge objects
var obj = {};
for ( var x in state ) if (state.hasOwnProperty(x)) obj[x] = state[x];
obj.count = state.count + 1;

对于CounterComponent，它只是将actions 对象合并到它的CounterComponent 的props 中。 基本相同：

//spread version
CounterComponents({
  counter: state.count,
  ...actions
});
//underscore merge
CounterComponents(_.merge({
  counter: state.count,
}, actions));
//es6 merge
CounterComponents(Object.assign({
  counter: state.count,
}, actions));

Answer 3

我不知道我们应该在 Stackoverflow 上问这样的问题，因为大多数情况下这表明你还在学习 ES6 和 React，而且你不是在问具体的问题。

无论如何要快速入门，您需要了解 ES6 和 React，我建议您从这里开始：

Learn ES6 with Babel

React Simplified

P.S：请忽略安德鲁·雷博客的标题，他的帖子真的很棒。