react 从入门到实践之基础总结一

柔光的暖阳◎ 2022-10-21 14:51 193阅读 0赞

#### 一、为什么要学习React ####

1.  前言，选择任何一门语言学习都是有时间和金钱的成本的，那么 `React` 值得学习。
2.  学习的必要性，如下所示：

*  使用组件化开发方式，符合现代 `Web` 开发的趋势; 企业前后端项目分离，唯有 `React` 是首选；
 *  技术成熟，社区完善，配件齐全，适用于大型 `Web` 项目（生态系统健全）；
 *  由 `Facebook` 专门的团队维护，技术支持可靠；
 *  `ReactNative - Learn once, write anywhere: Build mobile apps with React`；
 *  使用方式简单，性能非常高，支持服务端渲染；
 *  `React` 使用前端技术非常全面，有利于整体提高技术水平；此外，有利于求职和晋升，有利于参与潜力大的项目；

#### 二、React快速入门 ####

1.  概念介绍，如下所示：

*  `React` 起源于 `Facebook` 的内部项目，因为该公司对市场上所有 `JavaScript MVC` 框架，都不满意，就决定自己写一套，用来架设他们自己的 `Instagram` 的网站。
 *  做出来以后，发现这套东西很好用，在 `2013年5月` 开源了。目前已经成为前端的三大主流框架。

1.  `React` 是什么，如下所示：

*  `React` 是用于构建用户界面的 `JavaScript` 库，围绕 `React` 的技术栈主要包括：`React, redux, react-redux, react-router, .....`
 *  `React` 官网：`https://reactjs.org/`， `React` 中文：`https://react.docschina.org/`

1.  `React` 具备的特点，如下所示：

*  使用 `JSX` 语法创建组件，实现组件化开发，为函数式的 `UI` 编程方式打开了大门；
 *  性能高：通过 `diff` 算法 和 虚拟 `DOM` 实现视图的高效渲染和更新；
 *  声明式、组件化、一次学习，随处编写；

1.  `React` 核心，虚拟 `DOM` 和 `Diff` 算法。
2.  对于虚拟 `DOM`，如下所示：

*  虚拟 `DOM`，`React` 将 `DOM` 抽象为虚拟 `DOM`，虚拟 `DOM` 其实就是用一个对象来描述 `DOM`，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率；
 *  为什么用虚拟 `DOM` ？当 `DOM` 发生更改时需要遍历 `DOM` 对象的属性, 而原生 `DOM` 可遍历属性多达 `200` 多个个, 而且大部分属性与渲染无关, 导致更新页面代价太大；
 *  虚拟 `DOM` 的处理方式，如下所示：
    
     *  1）用 `JS` 对象结构表示 `DOM` 树的结构，然后用这个树构建一个真正的 `DOM` 树，插到文档当中。
     *  2）当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。
     *  3） 把记录的差异应用到步骤1所构建的真正的 `DOM` 树上，视图就更新了。

1.  对于 `Diff` 算法，如下所示：

*  最小化页面重绘；
 *  当我们使用 `React` 在 `render()` 函数创建了一棵 `React` 元素树，在下一个 `state` 或者 `props` 更新的时候，`render()` 函数将会创建一棵新的 `React` 元素树；
 *  `React` 将对比这两棵树的不同之处，计算出如何高效的更新 `UI`（只更新变化的地方），此处所采用的算法就是 `diff` 算法；

#### 三、React初体验 ####

1.  对于 `React` 的初体验，代码如下所示：

<!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>Document</title>
    </head>
    <body>
      <div id="app"></div> 
    
      <script src="../js/react.development.js"></script>
      <script src="../js/react-dom.development.js"></script>
      <script src="../js/babel.min.js"></script>
      <script type="text/html"> // 1.获取页面真实的容器元素 const containerDiv = document.getElementById('app') // 2. jsx语法创建虚拟DOM对象 const vDom = <div>React</div> // 3. 将虚拟DOM渲染到页面元素上去 ReactDom.render(vDom, containerDiv) </script>
      <script type="text/babel"> const vDom = <div>React</div> ReactDom.render(vDom, document.getElementById('app')) </script>
    </body>
    </html>

1.  `JSX` 语法入门，往容器中插入一个 `span` 标签, `class` 为: `"react"`, 内容为: `"React"`。对此，有两种实现方式，通过典型 `js` 方式和 `JSX` 方式，代码如下所示：

<!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>Document</title>
    </head>
    <body>
      <div id="app1"></div>
      <div id="app2"></div>
      <script src="../js/react.development.js"></script>
      <script src="../js/react-dom.development.js"></script>
      <script src="../js/babel.min.js"></script>
    
      <script> // 通过典型js方式 // 1. 创建变量 let myClass = 'react' let myContent = 'React' // 2. 创建DOM const vDom = React.createElement('span', { className: myClass}, myContent) // 3. 将虚拟DOM渲染到页面元素上去 ReactDom.render(vDom, document.getElementById('app1')) </script>
    
      <script type="text/babel"> // JSX方式 const vDom1 = <span className={ myClass.toUpperCase()}>{ myContent}</span> ReactDom.render(vDom1, document.getElementById('app2')) </script>
    </body>
    </html>

1.  对于插入标签的总结，如下所示：

*  `JSX` 只是高级语法糖, 最终执行时还是会被转成原生 `js`, 通过 `babel` 等方式；
 *  更加语义化, 更加直观, 代码可读性更高；
 *  性能相对原生方式更加好一些

1.  对于 `JSX` 常见的界面操作方式，如下所示：

*  多重标签嵌套，代码如下：

*  `js`中的变量, 表达式要写在 `{}` 内，代码如下：

*  内联样式通过对象方式引入，代码如下：

*  数组遍历，代码如下：

1.  对于 `JSX` 常见的界面操作方式，总结如下所示：

*  `JSX` 中添加属性时，使用 `className` 代替 `class` , 像 `label` 中的 `for` 属性，使用 `htmlFor` 代替；
 *  `JSX` 创建 `DOM` 的时候，所有的节点，必须有唯一的根元素进行包裹；
 *  `JSX` 语法中，标签必须成对出现，如果是单标签，则必须自闭合；
 *  在 `JSX` 中可以直接使用 `JS` 代码，直接在 `JSX` 中通过 `{}` 中间写 `JS` 代码即可；
 *  在 `JSX` 中只能使用表达式，不能出现语句；
 *  在 `JSX` 中注释语法：`{/* 中间是注释的内容 */}`