React课程大纲

概览

1. React是什么？

React是Facebook开发并开源的一个采用声明式，执行高效而且灵活的用来构建用户界面的Javascript框架。

2. 优势？劣势？区别？适合？

React作为现代前端UI框架，具备高效和灵活的特点，JSX语法和单项数据流的理念使得复杂的单页面应用变得可控且更易维护。跟jQuery之类的上一代库相比，它需要一定的学习成本和对前端更加深入的理解。React适合于大型复杂单页面应用的开发。

开始之前

1. 什么是前端工程

由于浏览器兼容性和性能的要求，前段工程应运而生，主要是为了将一系列可重复且单调的工作自动化，并类似传统的后端工程一样引入了构建和测试的概念。

2. 环境配置（git，webpack，es6）

git是最常见的版本控制工具，简单易用，功能强大。webpack是当前最常见的前端工程的框架，用于react项目的构建，es6是下一代的Javascript语法，es6能更好地加速JSX的编写。

React基础

1. JSX语法

JSX 是一种 JavaScript 的语法扩展。通常我们在React中使用 JSX 来描述用户界面。JSX乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。通过babel等编译工具，JSX可以被转化为React的纯JS语法。

2. 组件（component）

组件是React最基本的组成元素，页面上每个元素都能被称之为组件。React世界的各个组合，都是以组件来进行的。

3. 属性（props）

父子组件间通过属性（props）来传递数据，这是React为组件提供的一种可控的从组件外部接受信息的能力。

4. 状态（state）

组件内部可以维护自身的状态（state），这保证了组件拥有管理自身的能力。

5. 生命周期（lifecycle）

React组件有一个生命周期的概念，用户可以通过定制特定的函数/方法，来控制组件在生命周期内的行为逻辑。

6. 事件和表单

React通过props传递事件，组件之间互相触发各自的事件来达到页面交互的过程，表单是最常见的交互需求，React通过受控的概念来实现所谓的“双向绑定”。

React进阶

1. state or props?

state和props都可以被组件读取，如何合理运用state和props，即哪些数据通过state控制，哪些数据通过props传递，这考验编程人员的水平。

2. 受控 or 非受控?

受控的概念往往造成React初学者的困惑，正确理解受控的内含，理解React的设计者为何要采取这种模式，而不是传统的双向绑定，这对学习React非常重要。一个组件何时需要受控何时不需要对于页面设计也至关重要。

3. children or props?

props可以传递React组件实例，而children作为特殊的props也可以用于传递React实例，学习如何正确使用这两者对设计一个合理的组件十分有用。

4. 如何设计一个优秀的React组件

React组件的设计有一些经验上的原则，这是很多开发人员通过不断实践总结出来的一些行之有效的最佳实践。

深入React

1. 深入props：defaultProps和PropTypes

React可以通过defaultProps和PropTypes等属性或功能来定制组件的属性，使得开发人员能更好地封装和使用组件。

2. 深入DOM：Refs、Portals、Fragments

React提供了refs的功能来直接访问渲染出来的DOM元素，通过portals功能来提供浮动的DOM渲染。在16.2版本之后，更是提供了Fragments功能来渲染列表形式的组件。

3. 深入性能：Diff算法、key和部署

难以想象像如此规模的框架运行起来竟如此高效，React内部执行了一套Diff算法来找出每次数据变化时需要重新渲染的元素，key在这里起到了至关重要的作用。为了追求性能，React甚至提供了部署版本的打包。

4. 深入架构：高阶组件和Context

高阶组件是一个框架发展成熟之后的必然产物，高阶组件在React中应用广泛，它主要解决了组件间的重用问题。而Context功能则解决了跨多层组件间数据的传递需求。

5. 深入数据：单向数据流

随着大型页面的出现，页面间数据的传递和交互控制越来越难以维护，单向数据流的概念由此出现。它使得页面数据的可控和可追溯，并且使得数据得到更好的重用。

其他

1. 状态管理：大型SPA的基础，flex、reflex、redux、dva实践

为了配合单向数据流的概念，React设计组提供了flex的状态管理库，社区更是在此基础上提供了更加优秀的reflex、redux和dva等封装。学习使用这些库能更好更快地编写React应用。

2. AntDesign：视觉标准化的福音

AntDesign是当前最优秀的一个服务于企业级产品的设计体系，他帮助用户快速搭建优雅和一致的页面视觉。

3. 第三方库和React联合开发

React可以通过Refs来配合第三方库的使用，一般的场景是使用jQuery等库操作DOM元素，或使用echarts或者g2等图表库来渲染图表。