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发生变化,该函数就会被调用。

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

你可能感兴趣的:(React相关内容)