ECMA 6,React Native和Redux:这种语法糖是什么意思？

Question

在查看一个本地redux示例项目时,我提出了很多问题.有人能指出我将解释那些高级语法糖的文件吗？

例如:

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

为什么AppRegistry在{},与React的导入和AppRegistry的导入有什么功能差异？

这个import语句会发生什么:

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
};

是否有意义？

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

Answer 1

这是很多问题; 其中大多数与React/Redux无关; 他们真的关于EcmaScript 2015/2016/next.也许你想重新说出你的问题？无论如何,这是我的两分钱':

为什么AppRegistry在{},与React的导入和AppRegistry的导入有什么功能差异？

这个import语句会发生什么:

这是关于ES2015进口的一点解释.考虑两个文件:

// 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语句中使用花括号来表示您只想导入特定的导出,而不是整个模块.

如果省略花括号,则只会导入默认导出.

你也可以用星号来全部出口进口(这是默认的出口和所有其他命名的出口)为一体的结合.例如,

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
}

包含对象传播属性.假设state是

{
    a: 1,
    b: 2
}

它将转化为:

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

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

导入模块只是出口他们可以有意义在的内部不应直接导入的项目.我没有看过这个特别的项目,所以我不是在正确的地方判断这个项目是否合理; 无论如何,它的语法也更短:

export { counter } from "./counter";