React 系列 - 前言

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

React 是什么

我们从React 官网可以看到官方对于 React 的定义 React 是一个用于构建用户界面的 JavaScript 库。从本质而言，React 就是一个 JavaScript 的代码库,其功能是为程序员提供了一种子组件不能直接影响外层组件（"data flows down"）的模型，数据改变时对 HTML 文档的有效更新，和现代单页应用中组件之间干净的分离。

React 做了些什么

在前端界面中，不可避免的需要使用到三个技术：

• HTML:构建页面结构
• CSS：定义页面样式
• JavaScript：动态地处理事件和数据

我们当然可以直接使用这三个技术构建前端页面，使用也不会出现太大的问题，但是在开发过程中可能会出现很多问题：

• 你需要频繁的考虑浏览器的兼容性问题，并为了解决兼容问题写出一堆重复的代码。
• 你需要手动修改 DOM 对象，在情况复杂的时候可能会出现一些奇奇怪怪的难以查找的问题
• ……

针对以上的问题，前端开发人员一直在寻找一种好的解决方案来帮助自己更好的开发页面。

在过去，JQuery 被大量使用来处理上面的问题，但随着时间的发展，人们发现有更为便捷的框架来解决 DOM 操作的问题，这就是现在前端使用最多的三大框架——Angular、React、Vue。

它们拥有着统一的理念——声明式编程和组件化开发，以下以 React 举例

1. 以组件的方式去划分一个个功能模块
2. 组件内以 JSX 来描述 UI 的样子，以 state 来存储组件内的状态
3. 当应用的状态发生改变时，通过 setState 来修改状态，状态发生变化时，UI会自动发生更新

发现了吗，我们将不再需要手动操作 DOM 对象了，这将我们从数据处理和 UI 处理的耦合中脱离了出来，从此以后我们只需要专心处理好数据，UI 会根据数据自动发生更新！

除此之外，React 还拥有这一个更令人兴奋的特性——多平台适配

• 起初 React 只在 Web 端使用

• 2015 年，FaceBook 推出了 React Native，使用 React Native 程序员可以使用 React 的代码开发出移动端的程序。

• 如今，你可以使用如 uni-app、Taro 进行更多元的开发，你可以只编写一次的 React 代码，在 Web、移动端、小程序等多端使用，实现真正的跨端开发。

我们为什么要学习 React

让我们来看两张图。

（图为2020最具知名度的框架，可以看到React的知名度排在的第二位）

(图为2020年程序员最想学习的框架，React位列榜首)

作为前端工程师，我们可以很明显的看出未来选择的趋势，在国内前端领域 React 已经成为了当之无愧的第一框架（因为 Angular 对 TypeScript 有一定要求，国内使用 Angular 的公司较少）

我们要怎么学习 React

React 官方中文文档是 React 学习最详尽的路线，但是对于初学者而言大家可能会不知道如何在官方文档中查询到自己需要的知识，所以我们基于 React 官方文档，结合 React 学习路线整理出以下一份 React 教程，旨在用平实的语言和简单的代码来引导初学者进行 React 的学习。加油吧！骚年，让我们开启对 React 的学习吧！