标签：Redux

一、React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法，用constructor构造器来构造默认的属性和状态。

 

 

 

 

 

 

 

 

二、 Super(props)

 

    调用父类的构造函数，react希望把所有props，state的定义尽量放到父类中进行。

 

    子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，

 

    而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

 

三、容器组件 Container Components 和展示组件 Presentational Components

 

                  |           展示组件         |          容器组件                        

            作用   |   描述如何展现(骨架、样式）  | 描述如何运行(数据获取、状态更新）

     直接使用Redux  |             否           |           是                            

         数据来源   |            props         |   监听 Redux state                

          数据修改  |     从 props 调用回调函数  |   向 Redux 派发 actions        

          调用方式  |             手动         |   通常由 React Redux 生成        

 

<strong>四、connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])</strong>

 

连接 React 组件与 Redux store。连接操作不会改变原来的组件类，而是返回一个新的已与 Redux store 连接到组件类。

 

 

如果定义该参数，组件将会监听 Redux store 的变化。只要 Redux store 发生变化，mapStateToProps函数就会被调用。

该回掉函数必须返回一个纯对象，这个对象与组件的props合并。如果省略了这个参数，组件将不会监听 Redux store。

如果指定了第二个参数 ownProps，则该参数的值为传递到之间的props，而且只要组件接收到新的 props，

mapStateToProps也会被调用。

 

 

如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，

对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中dispatch方法会将action creator的返回值作为参数执行。

这些属性会被合并到组件的 props 中。如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由你来决定如何返回一个对象，

这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起（提示：你也许会用到 Redux 的辅助函数

bindActionCreators()）。

 

如果你省略这个 mapDispatchToProps 参数，默认情况下，dispatch 会注入到你的组件 props 中。

如果指定了该回调函数中第二个参数 ownProp该参数的值为传递到组件的 props，而且只要组件接收到新

props，mapDispatchToProps 也会被调用。

 

 

如果指定了这个参数，mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。

该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，

或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数，默认情况下返回 Object.assign({},

ownProps, stateProps, dispatchProps) 的结果。

 

4.[options] (Object)：

 

如果指定这个参数，可以定制 connector 的行为。

[pure = true] (Boolean): 如果为 true，connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果，

避免不必要的更新，前提是当前组件是一个“纯”组件，它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store

的 state。默认值为 true。[withRef = false] (Boolean): 如果为 true，connector 会保存一个对被包装组件实例的引用，

该引用通过 getWrappedInstance() 方法获得。默认值为 false。

  |       |-- react-redux => redux本身只能处理同步的Action

  |       |-- react-thunk => 在我们没有加上thunk这个中间件之前，

  |       |                  store的dispatch方法只能传入一个action对象，

  |       |                  thunk的作用就是能够让我们可以将一个function方法传入diptach，

  |       |                  这在做异步的时候非常有用。

  |       |-- redux-promise => redux-promise支持将promise对象作为参数传入dispatch中。

  |       |-- prop-types => React.PropTypes 自 React v15.5 起已弃用。

  |       |                 请使用 prop-types 库代替。调用方法：

  |       |-- @types/react => implements method in React.Component,解决

  |       |                   Cannot resolve symbol 'Component' 的问题

  |       |-- postcss-loader => PostCSS，一款通过 JS 插件转换 styles 样式的工具。

  |       |                     根目录下新建postcss.config.js文件。配置如下：

  |       |                     webpack配置：{

  |       |-- Autoprefixer => PostCSS插件，一个后处理程序。解析CSS并添加浏览器前缀。

  |       |                     postcss.config.js文件中配置如下：

  |       |-- extract-text-webpack-plugin => 将css单独打包成一个文件。

  |       |                                  它会将所有的入口 chunk(entry chunks)中引用的 *.css，

  |       |                                  移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到JS bundle中，

  |       |                                  而是会放到一个单独的 CSS 文件（即 styles.css）当中。

  |       |                                  如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle

  |       |                                  会跟 JS bundle 并行加载。

  |       |-- optimize-css-assets-webpack-plugin => 压缩抽离后的css代码,

  |       |-- html-webpack-plugin => 该插件将为您生成一个HTML5文件，

  |       |                          其中包括使用script标签的body中的所有webpack包。

  |       |-- copy-webpack-plugin => 在webpack中拷贝文件和文件夹。例如：

  |       |                          作用就是将 ./src/static/images

  |       |                          目录下的图片拷到编译目录到 images 文件夹下面

  |       |-- rimraf => 编译前清空dist目录。package.json配置：

  |       |-- OpenBrowserPlugin => webpack编译后自动打开浏览器

  |       |-- axios => 一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

  |       |-- babel-eslint => 一个Babel parser的包装器，这个包装器使得Babel parser可以和ESLint协调工作

  |       |                   .eslintrc.js中配置："parser": "babel-eslint",

  |-- dist => 打包输出文件目录

  |    |-- actions => Action是把数据从应用传到 store 的有效载荷。

  |    |              它是 store 数据的唯一来源，一般通过

  |    |              store.dispatch() 将 action 传到 store。

  |    |-- reducers => Action只是描述了有事情发生了这一事实，

  |    |               并没有指明应用如何更新 state。

  |    |               reducer 用来做更新state这个动作。

  |    |-- store  =>  1.维持应用的state；

  |    |              2.提供 getState() 方法获取 state；

  |    |              3.提供 dispatch(action) 方法更新state；

  |    |              4.通过 subscribe(listener) 注册监听器；

  |    |              5.通过 subscribe(listener) 返回的函数注销监听器。

 |    |-- components => 展示型组件目录

  |    |-- containers => 容器型组件目录

  |    |-- config => 配置actionType、接口

  |    |-- library => 插件库

  |    |-- service => 服务配置

  |    |-- static => 静态文件目录

  |    |-- main.js => 入口文件

  |-- webpack => webpack配置目录

  |-- .babelrc => Bable的配置文件，用来设置转码规则和插件。

  |               Babel是一个广泛使用的ES6转码器，

  |               可以将ES6代码转为ES5代码。

  |-- .gitignore => git上传忽略特殊文件配置

  |-- package.json => 定义了这个项目所需要的各种模块，以及项目的配置信息。

  |-- package-lock.json => npm5.0后新增。记录了整个 node_modules

  |                        文件夹的树状结构,当重新安装模块的时候，

  |                        速度加快。但是，生成pack-lock.json后，

  |                        重复执行npm install时将会以其记录的版本来安装。

  |                        这时如果手动修改 package.json 中的版本，

  |                        重新安装也不会生效，只能手动执行npm install

  |                        命令指定依赖版本来进行修改。

  |-- yarn.lock => yarn.lcok文件是自动产生的，

  |                和package-lock.json的功能一样，

  |                只不过yarn可以做到手动更改package.json后，

  |                重新安装并更新lockfile。