响应式系统与 React | 青训营笔记

这是我参与「 第五届青训营 」伴学笔记创作活动的第 6 天。

前言

今天的课程中，我跟随牛岱老师学到了响应式系统与 React 的内容，主要包括 React 的历史与应用、React 的设计思路、React (hooks) 的写法与 React 实现以及 React 状态管理库与应用级框架。

React 的历史与应用

React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，很多人关注和使用它，尤其在欧美地区比较流行。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React.js 特点

1. 声明式设计： React采用声明范式，可以轻松描述应用。
2. 高效： React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活： React可以与已知的库或框架很好地配合。
4. JSX： JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件： 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单的原因。

React 状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

React 组件

组件之间的组合是 React 的重要特征。不同开发者写的组件应该可以一起正常执行。给一个组件添加功能，而不会对整个代码库造成涟漪似的变化。

比如，应该可以在不影响任何使用它的组件的情况下，将一些内部 state 引入该组件。类似的，在必要的情况下可以在任何组件里添加一些初始化和销毁的代码。

在组件中使用 state 或者生命周期函数没什么“不好”。跟所有强大的特性一样，应该适度使用它们，React 并不打算移除他们。相反，他们是 React 之所以好用的一部分。

人们常常认为组件“只是函数”，但在 React 开发者看来，组件要好用的话，需要的不止这些。在 React 中，组件描述了任何可组合的行为，包含渲染、生命周期和 state。一些类似 Relay 的外部库给组件带来了其他增强功能，比如描述数据之间的依赖关系。有可能这些做法会以某种形式回到 React 中。