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

时间:2016-04-09 20:23:26

标签: javascript ecmascript-6 react-native redux

在查看react native redux example项目时,我想出了很多问题。有人能指出我将解释那些高级语法糖的文件吗?

例如:

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

返回陈述真正归还的是什么?如果扩展运算符已经包含一个名为“count”的变量,那么扩展运算符和一个名为“count”的属性是否会被合并在一起?

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

import counter from './counter';

export {
  counter
};

有意义吗?

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

3 个答案:

答案 0 :(得分:5)

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

  

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

     

此import语句会发生什么:

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

如果省略大括号,则只会导入默认导出。

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

import * as everything from "./A";

或多或少应该被描述为:

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

现在,everything是一个绑定到每个导出的对象,如上所示。 因此,everything.default === 1everything.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";

答案 1 :(得分:2)

我不知道我们应该在Stackoverflow上问这样的问题,主要是因为它表明你还在学习ES6和React,而且你不是在问一个特定的问题。

无论如何要快速入门,你需要了解ES6和React,我建议你从这里开始:

<强> Learn ES6 with Babel

<强> React Simplified

P.S:忽略了安德鲁·雷博客的头衔,他的帖子真的很棒。

答案 2 :(得分:1)

代码表格摘要:

// 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的道具中。 它与:

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