一、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使用的场景和其存在的必要性
如果没有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。
connect:react-redux中的模块,连接 React 组件与 Redux Store,定义该参数后组件就可以监听 Redux Store 的变化,任何时候只要store发生变化,该函数就会被调用。