1. 了解当前 React 常用技术栈 React【UI框架】React-router-dom【路由框架】React-redux【状态管理】Mobx 【状态管理】React-query【专注于网络请求的状态管理】rtk-query 【由redux团队退出的网络请求状态管理】antd【组件库】TypeScript【JS超集】 UI 框架 ReactReact 与 Vue 可以说是现阶段最热门的前端UI框架了，最近开始学习 React，准备开一个新坑：从零开始学习React，主要是学习时的一些思考与记录，如有谬误，烦请斧正。由于前端技术的快速迭代，我会在适当位置标注版本信息，以免出现货不对板。
React 不必多说，我们要学的就是这个，官网是这样介绍 React 的：
用于构建用户界面的 JavaScript 库
其主要职责便是作为UI界面框架，用于方便我们 *** 作DOM（虚拟DOM）、渲染视图到用户的浏览器中，他与JavaScript的关系就像：Java 之于 AndroidFarmwork，Dart 之于 Flutter。我们之后所有开发工作都离不开React提供的各种接口，没事可以多去官网看文档。
路由框架 React-router-domReact-router 是由 remix-run 出品的、适用于 React 的前端路由框架，如果你像我一样是 Android 工程师，对路由这个概念可能比较陌生，简而言之就是根据浏览器的不同地址，渲染不同页面。随着 Compose 的兴起，路由的概念目前也开始逐渐的在 Android 中变得重要起来。另外，因为我们是在 React - Web 这样的环境使用，所以一般需要额外配合 React-route-dom 这个库协同使用。
题外话：Flutter 与 Compose 都借鉴了很多 React 中的思想，如果你对这两者有一些了解，接下来的一些概念性的东西就会觉得很熟悉。
状态管理这涉及到 React 的重要思想：State，如果你有 Flutter 的经验，这应该很好理解。如果对此毫无概念，请参考下面的文章：
React 哲学FAQ: state 与 props 的区别是什么？State & 生命周期在 React 中，UI的渲染都离不开状态State的变化，不同页面的不同组件之间可能涉及到复杂的状态复用、状态变更，这就必然涉及到状态管理，目前在 React 世界中最流行的状态管理库有 Redux、Mobx 等等。
Redux是一个通用的状态管理框架，他不限定你使用什么UI框架，为了方便在 React 中使用，redux团对推出了 React-redux，方便我们使用。
Mobx，是一个类似的状态管理库，但是比起 Redux ，他的使用更为简单一些，这两者在之后我们都会接触到。
React-query，这是一个专注于网络请求状态管理的库，按照 React-query 的思想，将状态拆分为了，普通的用户 UI 前台状态与来源自网络请求的后台状态，React-query 帮我们处理好了一些列关于网络请求的相关状态管理，例如、loading、error、success、refetch等等，是一个非常好用的库。
rtk-query，与 React-query 功能类似，内部使用 redux 实现，可以看做是 Redux 的全家桶一部分，风格更加偏向于 Hook，我们会在后面用案例对比二者。
题外话：React 并不是像 Android 团队那样具有强控制力，在 Android 中几乎一切都有来自官方的各种库的支持，也都存在真正意义上的“最佳实践”，React 与之相反，React 团队似乎只专注于维护 React 本身，其他的一切都交给社区，而前端又是一个乐忠于造轮子的群体，故而在React上并没有真正意义上的“全家桶”、“最佳实践”。
所以用什么、选哪个这个问题，在React上是一个比较难办的事情，我们一般推荐选择比较稳定的、长期在维护的、社区活跃的库，这些库借用mobx官方的说法就是：“是经过战火洗礼的库”，出现问题我们也更容易找到解决方法。
组件库就像我们上边说的 React 只提供了核心的 UI 框架功能，不借助外力的情况下，组件也只能使用原生标签。蚂蚁金服出品的 AntD 是目前非常主流的一个 React 组件库，提供了很多可以开箱即用的组件，方便我们构建漂亮的前端页面。
2. 上手实 *** ，编写第一个组件 2.1 在 html 中渲染一个组件DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="root">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel">
/* type是babel才能使用jsx */
const mid = "myid";
const mdata = "Hell0 react";
//1.创建虚拟dom
const VDOM = (
<h1 className="title" id={mid.toLowerCase()}>
<span style={{color: 'red',fontSize: '34px'}}>{mdata.toLowerCase()}</span>
</h1>
);
//2.渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("root"));
script>
body>
html>
JSX 这个概念是由 React 提出的，可以把他简单了理解成：我们可以在 js 里直接使用各种 html 标签、各种React组件。
const VDOM = (
<h1 className="title" id={mid.toLowerCase()}>
<span style={{color: 'red',fontSize: '34px'}}>{mdata.toLowerCase()}</span>
</h1>
);
上面我们使用的 VDOM，就是一个JSX。
为什么会出现 JSX ？我们为什么需要用 JSX ？
如果你对 vue 有一定的了解，你可能知道，在 vue 中对一 个.vue 文件是有由script、template、style，所有的关于页面渲染的基本都放在 template中，通过双向绑定来实现数据渲染显示。
假想这样一个场景，我们从后台接口获取到了某个班级的学生列表，我们希望筛选出全部的：家住在吉林省的男生。
如果我们使用 vue 的话我们需要在 script 中处理好数据逻辑，然后再将这个数组绑定到 v-for 标签中
显然是相对比较麻烦的，如果我们直接使用 JSX 的写法，就会比较清晰明了：
//从数据中筛选，并map成JSX元素
const list = data
.filter(item => item.province==='jilin' && item.gender==='man')
.map(item => <li>{item.name}</li>)
....
return (
<div>学生列表：</div>
<ul>
{list}
</ul>
)
{}标签中样式的类名不要用class，因为这是 js 关键字，要用 className 替代标签内联样式 需要用 style={{key:value,key2:value2}}的方式去写，小驼峰一个虚拟dom对象 只能有一个根标签jsx中的所有标签必须闭合小写标签直接转换成对应的html标签，大写字母开头的标签识别为react组件
2.4 编写一个组件
在 React 中，有两种编写组件的风格，分别是：1、类式组件；2、函数式组件。在 React 全面引入 Hook 之后，目前的主流就是全面拥抱函数式组件，除非远古项目，否则我们第一选择就是函数式组件。
我们写一个极简的函数式组件，然后将它渲染到root节点：
<script type="text/babel">
const H2 = ({ title }) => <h2>{title}</h2>;
ReactDOM.render(<H2 title="这是一个自定义组件" />, document.getElementById("root"));
script>
这里我们使用函数对象的声明方式，而不是 function 关键字，使用 ES6 的结构赋值获取到标签中传递的 props。
一个函数式组件的最大特征，就是函数的返回值是 JSX 元素，一般的我们使用大写驼峰的命名方式来命名一个组件。
函数式组件的参数被称为 Props，我们在书写标签时，后面传入的 k-v 键值对，都会作为 props 传入函数式组件。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）