React.js 小书

叁歲伎倆 2022-09-30 15:49 154阅读 0赞

# React.js 小书 #

> 本文作者：[胡子大哈][Link 1]  
> 本文原文：[React.js 小书 ][React.js _]

**转载请注明出处，保留原文链接以及作者信息**

在线阅读：[http://huziketang.com/books/react/][React.js _]

--------------------

## 简介 ##

这是一本关于 React.js 的小书。

因为工作中一直在使用 React.js，也一直以来想总结一下自己关于 React.js 的一些知识、经验。于是把一些想法慢慢整理书写下来，做成一本开源、免费、专业、简单的入门级别的小书，提供给社区。希望能够帮助到更多 React.js 刚入门朋友。

由于水平有限，编写的过程难免会有诸多错误，也希望大家在看的过程中发现了问题，可以在 Github 上给该项目发 Pull Request。衷心希望可以有更多的人参与到本书的编写当中。

（本书的后续可能会做成视频版本，敬请期待。）

## 本书介绍 ##

本书为有一点前端基础的并且是 React.js 零基础的同学而作，帮助他们掌握 React.js 并且灵活地把 React.js 应用到实际项目当中。如果你有一定的 HTML、CSS、JavaScript 基础并且希望学习 React.js，而又觉得 React.js 当中有些概念比难以接受和理解，希望能够从零开始学习，那么本书很适合你。但如果你已经对前端已经非常熟悉并且用过不少的前端框架和相关的组件化技术，建议你直接看官网文档。

本书并不会文档式地包含所有知识点，只会提炼实战经验中基础的、重要的、频繁的知识进行重点讲解，让你能用最少的精力深入了解实战中最需要的 React.js 知识和套路，轻装上路。如果需要更多更全面的知识点，可以参看更多的官方文档或者其他丰富的资料。

**另外，本书全书采用 ECMAScript 2015，阅读之前请确保自己已经掌握了 ECMAScript 2015 的基本语法，否则阅读起来会非常困难。**

本书初定分为三个阶段，每个阶段最后会有实战分析，把该阶段的知识点应用起来。

**第一个阶段**：希望能让读者掌握 React.js 的基本概念和基础知识。包括问题的根源：前端组件的复用性问题、数据和视图的同步问题。了解清楚问题以后再了解 React.js 的基础知识，包括 JSX、事件监听、state、props、列表渲染等。看看 React.js 是怎么解决这些问题的。这个阶段结束以后，读者就可以可以运用 React.js 构建简单的页面功能。

**第二个阶段**：让读者更进一步了解 React.js，包括组件生命周期及其含义、state 和 props 的进阶概念、props 验证及其意义、组件组合进阶、如何和 DOM 打交道、并且开始引入前端应用状态管理所存在的问题。

**第三个阶段**：让读者掌握 React.js 较为高级的概念，包括高阶组件、context。并且尝试引入 React-router、redux 来协助我们构建较为完整的前端应用；还会开始深入讨论前端应用状态管理的问题。

## 目录 ##

**第一个阶段**

![-100_25-brightgreen.svg][]

*  Lesson 1 - [React.js 简介][React.js]
 *  Lesson 2 - [前端组件化（一）：从一个简单的例子讲起][Link 2]
 *  Lesson 3 - [前端组件化（二）：优化 DOM 操作][DOM]
 *  Lesson 4 - [前端组件化（三）：抽象出公共组件类][Link 3]
 *  Lesson 5 - [React.js 基本环境安装][React.js 1]
 *  Lesson 6 - [使用 JSX 描述 UI 信息][JSX _ UI]
 *  Lesson 7 - [组件的 render 方法][render]
 *  Lesson 8 - [组件的组合、嵌套和组件树][Link 4]
 *  Lesson 9 - [事件监听][Link 5]
 *  Lesson 10 - [组件的 state 和 setState][state _ setState]
 *  Lesson 11 - [配置组件的 props][props]
 *  Lesson 12 - [state vs props][]
 *  Lesson 13 - [渲染列表数据][Link 6]
 *  Lesson 14 - [实战分析：评论功能（一）][Link 7]
 *  Lesson 15 - [实战分析：评论功能（二）][Link 8]
 *  Lesson 16 - [实战分析：评论功能（三）][Link 9]

**第二个阶段**

![-100_25-brightgreen.svg][]

*  Lesson 17 - [前端应用状态管理 —— 状态提升][Link 10]
 *  Lesson 18 - [挂载阶段的组件生命周期（一）][Link 11]
 *  Lesson 19 - [挂载阶段的组件生命周期（二）][Link 12]
 *  Lesson 20 - [更新阶段的组件生命周期][Link 13]
 *  Lesson 21 - [ref 和 React.js 中的 DOM 操作][ref _ React.js _ DOM]
 *  Lesson 22 - [props.children 和容器类组件][props.children]
 *  Lesson 23 - [dangerouslySetHTML 和 style 属性][dangerouslySetHTML _ style]
 *  Lesson 24 - [PropTypes 和组件参数验证][PropTypes]
 *  Lesson 25 - [实战分析：评论功能（四）][Link 14]
 *  Lesson 26 - [实战分析：评论功能（五）][Link 15]
 *  Lesson 27 - [实战分析：评论功能（六）][Link 16]

**第三个阶段**

*  Lesson 28 - [高阶组件（Higher-Order Components）][Higher-Order Components]
 *  Lesson 29 - [React.js 的 context][React.js _ context]
 *  Lesson 30 - [动手实现 Redux（一）：优雅地修改共享状态][Redux]
 *  Lesson 31 - [动手实现 Redux（二）：抽离 store 和监控数据变化][Redux_ store]
 *  Lesson 32 - [动手实现 Redux（三）：纯函数（Pure Function）简介][Redux_Pure Function]
 *  Lesson 33 - [动手实现 Redux（四）：共享结构的对象提高性能][Redux 1]
 *  Lesson 34 - [动手实现 Redux（五）：不要问为什么的 reducer][Redux_ reducer]
 *  Lesson 35 - [动手实现 Redux（六）：Redux 总结][Redux_Redux]
 *  …

## 特别鸣谢 ##

特别感谢以下朋友对本书所做的审校工作，给本书提出了很多宝贵的改进意见：

*  [邝伟科][Link 17] \- 腾讯 Web 前端工程师
 *  [杨海波][Link 18] \- 百度 Web 高级前端工程师
 *  [谢军令][Link 19] \- 天猫 Web 前端工程师
 *  [戴嘉华][Link 20] \- 前微信 Web 前端工程师

## 联系作者 ##

*  邮箱：huzidaha@126.com
 *  知乎：[@胡子大哈][Link 1]
 *  专栏：[@前端大哈][Link 21]
 *  加入《React.js 小书》读者交流群，一起讨论、交流、学习前端技术。

![wechat-user.jpeg][]

## License ##

本作品采用 [署名-禁止演绎 4.0 国际许可协议][-_ 4.0] 进行许可

[Link 1]: https://www.zhihu.com/people/hu-zi-da-ha
[React.js _]: http://huziketang.com/books/react/
[-100_25-brightgreen.svg]: https://img.shields.io/badge/已完成-100%25-brightgreen.svg
[React.js]: http://huziketang.com/books/react/lesson1
[Link 2]: http://huziketang.com/books/react/lesson2
[DOM]: http://huziketang.com/books/react/lesson3
[Link 3]: http://huziketang.com/books/react/lesson4
[React.js 1]: http://huziketang.com/books/react/lesson5
[JSX _ UI]: http://huziketang.com/books/react/lesson6
[render]: http://huziketang.com/books/react/lesson7
[Link 4]: http://huziketang.com/books/react/lesson8
[Link 5]: http://huziketang.com/books/react/lesson9
[state _ setState]: http://huziketang.com/books/react/lesson10
[props]: http://huziketang.com/books/react/lesson11
[state vs props]: http://huziketang.com/books/react/lesson12
[Link 6]: http://huziketang.com/books/react/lesson13
[Link 7]: http://huziketang.com/books/react/lesson14
[Link 8]: http://huziketang.com/books/react/lesson15
[Link 9]: http://huziketang.com/books/react/lesson16
[Link 10]: http://huziketang.com/books/react/lesson17
[Link 11]: http://huziketang.com/books/react/lesson18
[Link 12]: http://huziketang.com/books/react/lesson19
[Link 13]: http://huziketang.com/books/react/lesson20
[ref _ React.js _ DOM]: http://huziketang.com/books/react/lesson21
[props.children]: http://huziketang.com/books/react/lesson22
[dangerouslySetHTML _ style]: http://huziketang.com/books/react/lesson23
[PropTypes]: http://huziketang.com/books/react/lesson24
[Link 14]: http://huziketang.com/books/react/lesson25
[Link 15]: http://huziketang.com/books/react/lesson26
[Link 16]: http://huziketang.com/books/react/lesson27
[Higher-Order Components]: http://huziketang.com/books/react/lesson28
[React.js _ context]: http://huziketang.com/books/react/lesson29
[Redux]: http://huziketang.com/books/react/lesson30
[Redux_ store]: http://huziketang.com/books/react/lesson31
[Redux_Pure Function]: http://huziketang.com/books/react/lesson32
[Redux 1]: http://huziketang.com/books/react/lesson33
[Redux_ reducer]: http://huziketang.com/books/react/lesson34
[Redux_Redux]: http://huziketang.com/books/react/lesson35
[Link 17]: https://github.com/kuangwk/
[Link 18]: https://github.com/hipoyang/
[Link 19]: https://github.com/brucexiejunling/
[Link 20]: https://github.com/livoras/
[Link 21]: https://zhuanlan.zhihu.com/qianduandaha
[wechat-user.jpeg]: /images/20220705/8aea7906722c4bf5ad5ab47e9f0b67aa.png
[-_ 4.0]: https://creativecommons.org/licenses/by-nd/4.0/legalcode