初级内容

开发工具

css

多种居中方法 (注意兼容性问题)

flex布局 (注意：仅支持高级浏览器)

display (重点： block,inline-block)

js基本语法

this绑定的意义

import 和 require 的异同点

es5 es6

阮一峰的es6入门文章 (需要看的章节：2-9、11、14-20、24)

es5版本Array新增方法

重点： let const 解构 Promise await yield 处理异步方法使用co库

Node基础操作

命令行执行： node [js文件名]

package.json配置文件常用参数

安装依赖： npm init

添加依赖： npm install xxx

执行脚本： npm run xxx

安装依赖： yarn

添加依赖： yarn add xxx

执行脚本： yarn run xxx

React(界面层框架)

jsx语法

备注：

1. 页面、组件在jsx中必须首字母大写。只有浏览器自带组件（如：div、a、img）才使用首字母小写。
2. xxx

Flux 设计思想

Redux(Controller框架)

Redux是Flux设计思想的具体实现，需要先了解Flux

Redux封装了Flux各个模块之间对接的方法，只需要分别编写相关模块并绑定Redux。

connect: 绑定Store和View，并且支持对View需要的数据进行筛选

dispatch: 提交Action给Dispatcher

注册reducer: 接收Action，并修改Store

配合 react-addons-update 插件更新数据，保证变更state时是创建而不是修改，并且优化创建效率

尝试跑通dva的example sorrycc/blog#18

ant.design

蚂蚁金服基于React的界面组件库

注意： 2.x版本仅支持IE10以上，1.x版本兼容IE8

react-router

第三方页面跳转类库，antd库已内置该类库2.x版本

根据 ant 的使用方法新建demo工程，需要完成以下功能：

1. 参考上个example创建新工程
2. 新建页面1，实现点击按钮计数器加1、减1、清空功能，需要使用redux实现
3. 新建页面2，实现获取测试工程首页源码字符串，并在当前页面中显示源码
4. 以上页面的点击按钮和相关界面，使用ant类库提供的样式

git基本操作

安装并会使用 GitHub Desktop

理解branch、remote、add、commit、push、pull、pull request(提交分支合并请求)

解决代码冲突问题

js代码调试方法

常用调试方法 (debugger、浏览器调试模式打断点 等)

未被捕获的异常自动断点（高级用法：无论是否被捕获都自动断点调试）

TypeScript

jest

js单元测试工具

对之前创建的工程编写测试脚本，要求：

1. 为redux方法编写测试用例，覆盖：加1、减1、清空、获取测试工程首页源码。(注：只需要对models中的相关方法进行测试，不需要执行dispatch)
2. 用快照接口(toMatchSnapshot)，分别为 增减界面 和 显示源码页 面编写测试用例

注： 让测试用例支持“imoprt”方法，需要将.babelrc下载到到项目根目录

UmiJs

英文文档

尝试跑通umi的example (https://www.yuque.com/umijs/umi/bmvfg6)

高级内容

React

界面类返回 Function 或 继承 React.Component 的Class 的差异（Class有状态、也有生命周期，但是效率没有Function高。所以Function常见为简单无状态控件）

Function 和 继承Component的类 生命周期分别是什么情况

了解界面刷新逻辑，如何减少刷新频率缩小需要刷新的界面范围（使用PureComponent 或 重写 shouldComponentUpdate方法）

利用requestAnimationFrame优化操作体验

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

How to fetch data with React Hooks?

Flow

用注释方式设置和检测变量类型和方法返回值类型是否正确

Redux

1. redux优化
2. 数据扁平化操作，提高数据复用率 (中文教程)

reselect

带有cache的state数据选择器。能优化数据获取效率。

https://github.com/reactjs/reselect

isomorphic-fetch

dva封装的第三方网络库

https://github.com/matthew-andrews/isomorphic-fetch

Less

css预处理语言（带变量和参数的css生成脚本）

Babel

将高级版本js的方法转换成低级语法的工具。如：foreach、Map、async等高级语法。

需要知道怎么配置和使用Babel，并且了解不同版本js的语法差别。

Polyfill

与Babel完成相同功能，但是Babel是将代码编译成低级语法，Polyfill是动态创建和添加高级语法代码到浏览器全局环境。

ESLint

js代码规范检测工具，可以配置检测策略。

需要理解并且知道怎么修改ESLint参数。

微信小程序

扩展部分（不要求掌握）

1. 手机端3种ViewPort的关系 (蚂蚁金服的说明文章)
2. webpack 项目自动打包工具，需要了解代码打包原理和相关配置参数。js拆分和动态加载。
3. dva第三方框架选择说明
4. autoprefixer 自动生成对应浏览器css样式
5. react-move react动画库
6. 性能测试工具 react-addone-perf 中文参考
7. 几个最流行的React框架
8. 16版本新增的React Fiber (扩展内容) 功能，重构了底层页面刷新方法
9. 推荐的项目文件结构
10. redux性能优化
11. 服务端渲染和SEO(搜索引擎优化)
12. css常用布局介绍
13. 移动端兼容问题
14. React应用架构设计指南
15. 傻瓜函数式编程