React相关内容

一、react开发环境的熟悉

二、在react开发环境下，结合antd-mobile以及antd-design组件的使用。

三、reduex的了解以及基本使用

四、项目中相关模块功能实现的叙述（如销售报价相关·）

一、react开发环境相关：

一般我们可以使用react的脚手架工具（create-react-app）或者通过手动配置webpack来初始化一个react工程项目。

react的脚手架工具本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。

• 使用脚手架工具(create-react-app)初始化react项目的过程
  1.全局安装react的脚手架工具create-react-app
  npm install -g create-react-app
  2.使用脚手架工具来创建一个react的初始化项目
  create-react-app my-app
  3.进入到该工程目录并执行就可以打开当前初始完成的这个react工程了。
  cd my-add
  启动编译当前的React项目
  npm start

• 手动配置webpack来初始化一个react项目
  通过手动配置webpack来创建一个react的初始化项目是比较繁琐的，不仅要去安装一些处理各种资源的包，而且还要去分别去设置，比起使用脚手架工具来说比较慢。

• react的语法、基本使用、css模块化、生命周期、路由的认识和使用，以及react中常用到的es6语法。

二、antd-mobile以及antd-design的了解以及其在react开发环境中的使用。

antd-mobile相关以及create-react-app结合antd-mobile的使用案例
antd-design相关以及react+webpack+antd-design的使用案例

三、react中状态管理工具redux的基本了解以及使用

。

redux的基本理解

redux 是一个专门用来管理数据业务或逻辑状态的框架，它也可以实现代码结构的规范化并提供组件之间通信的便利。

redux使用的场景和其存在的必要性

redux001.jpg

如果没有Redux，传递state是非常麻烦的。Redux中，可以把数据先放在数据仓库（store-公用状态存储空间）中，这里可以统一管理状态，然后哪个组件用到了，就去stroe中查找状态。如果途中的紫色组件想改变状态时，只需要改变store中的状态，然后其他组件就会跟着store中状态的改变自动进行改变。

redux的几个重要特点

• 单一数据源 整个应用的 state 被存储在唯一的Store中。
• state 是只读的 唯一改变 state 的方法就是触发 action。
• 为了实现根据 action 修改 state值，需要编写 Reducer。它接收先前的 state 和 action 返回新的 state 。

store:用来管理 state 的单一对象，其中有三个方法。

• store.getState():获取state ,经过 reducer 返回了一个新的 state,可以用该函数获取。
• store.dispatch(action):发出 action,用于触发 reducer 更新 state,
• store.subscribe(listener):监听变化，当 state 发生变化时，就可以在这个函数的回调中监听。
• action:Action 的作用就是告诉状态管理器需要做什么样的操作。
• reducer:reducer 是一个函数，接受 旧 state 和 action，根据不同的 Action 做出不同的操作并返回新的 state。

redux工作流程

connect：react-redux中的模块，连接 React 组件与 Redux Store，定义该参数后组件就可以监听 Redux Store 的变化，任何时候只要store发生变化，该函数就会被调用。

四、相关模块功能实现的叙述（销售报价为例）