---
title: 我的 React 知识体系
---

React 是一个声明式的 UI 库。与社区的数据流、路由、副作用管理，形成一个解决前端工程问题的优秀方案。这篇文章将体系化记录我的 React 学习路线、对其的认知。值得细讲的点将另辟文章来分析。

## 目录

React 篇：

0.  [x] 前置知识: [ES6][] & JSX
1.  [x] React 唯一视角：声明式、组件化

全家桶及前端工程篇：

# React 篇

## ES6 与 JSX

ES6 已在[这里][es6]另起文章，总而言之，并没有特别可讲之处。用 ES6 可以省去许多模板代码，使代码减少许多杂音；使用 JSX 则使你的 React 代码更加声明式。尽管它们都不是 React 本身的优点，但对于编写优雅的 React 代码大有裨益。

[在 React 中会用到的 ES6 特性][react-on-es6]主要包括：类及其(静态)字段（`state = {}; static propTypes = {}` 等）、箭头函数、装饰器、对象解构、数组解构、复合解构、模板字符串等。

[JSX][] 会将所有类 HTML 元素转换成 `React.createElement(component, props, ...children)` 的底层 API，是 React 声明式的来源之一。

## React 唯一视角：声明式、组件化

![image](https://user-images.githubusercontent.com/11895199/32177871-55a775d8-bd59-11e7-9ac9-7a2031b024c9.png)

React 对自己的定位首先就是：一个构建 UI 的库，优点是**声明式**、**组件化**、**可迁移的学习成本**。对这一「UI 库」定位的理解，是同理其设计决策和演化方向的必要视角。好的声明式是高效构建应用的利器，而组件化是大型应用不可缺少的分治和抽象工具。直观、分治一直是软件工程经典的思想，正因为是个人就不能逃脱脑力弱鸡的限制，于是才需要这些所谓工程化的实践出来。

先讲讲声明式。与命令式不同，它不讲自己做事情的步骤，而只描述要做什么事。这样既让其读者快速了解意图，又封装细节到独立的单元去。这是要用于构建大型、长期、多人合作项目的工具/框架所必须具备的能力。既然这是 React 的优势和能力，写 React 代码就要符合这个原则。写出具备统一的抽象层级、接口简洁、封装良好的代码，是每个专业人士必备的技能。

组件化[承载着模块分治、代码复用][component-or-layers]的作用。但很多人对组件化什么时候做分治、什么时候为复用却不一定有正确的思考。一个 React 组件中通常有两块东西：样式和逻辑。组件化纯样式的 UI 组件，对代码复用是有很大作用的；但对于组件逻辑，它往往随着具体业务形态而变化，难以具备稳固通用的复用价值，因此对逻辑组件进行组件化，通常是为了起模块分治的作用。对于业务逻辑组件，应该通过技术架构对业务形态的抽象和设计，才能达到复用和隔离的目的。

todo: 上面几句话有语病，重构一下。

# 全家桶及前端工程篇

[es6]: https://ethan.exthoughtworkers.tech/#/post/2018-10-25-readings-understand-ecmascript-6
[component-or-layers]: https://github.com/xufei/blog/issues/50
[react-on-es6]: https://babeljs.io/blog/2015/07/07/react-on-es6-plus
[jsx]: https://reactjs.org/docs/jsx-in-depth.html