javascript - ECMA 6、React Native 和 Redux : what does this syntactic sugar mean?

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this 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} />
    );
  }

什么将被传递给计数器组件？ actions-variables 从哪里来？它从 this.props 中被破坏，但在调用者中不会传递任何内容。另外:

中的展开运算符

<Counter/>

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

另一件事:

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

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

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

import counter from './counter';

export {
  counter
};

有意义吗？

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

Answer 1

有很多问题；其中大部分与 React/Redux 无关；它们实际上是关于 EcmaScript 2015/2016/next。也许您想重新表述一下您的问题？不管怎样，这是我的两分钱:

Why is AppRegistry in {}, and what is the functional difference to the import of React and the import of AppRegistry?

What happens with this import-statement:

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

如果省略大括号，则将仅导入默认导出。

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

import * as everything from "./A";

应该或多或少地转译为:

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

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

What will be passed to the Counter-Component?

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

What does the return-statement really return?

对象

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

包含 object spread property 。假设状态是

{
    a: 1,
    b: 2
}

它将转换为:

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

Also, the project contains a simple file called index.js in the reducers folder with the following plain content […] Does it make sense?

导入模块只是为了导出它们可以在不应直接导入内部的项目中有意义。我还没有看过这个特定的项目，所以我不适合判断这在这个项目中是否有意义；无论如何，有一个 shorter syntax for that ，还有:

export { counter } from "./counter";