React学习整理

Posted 2022-04-30 zhuxinpeng-looking

React介绍

React设计思想及其独特，属于革命性创新，性能出众，代码逻辑却非常简单。

库（library）：小而巧，库只提供了特定的api。优点是船小好调头，可以很方便的从一个库切换到另外的库，但是代码几乎不会改变。

框架（Framework）：大而全，框架提供了一整套的解决方案。所以，如果在项目中间，想切换到另外的框架是比较困难的。

和Angular1相比，React设计很优秀，一切基于JS并且实现了组件化开发的思想

React提供了无缝转到ReactNative上的开发体验。

1．React与Vue的对比

（1）组件化方面

+ 什么是模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发。

+ 什么是组件化：是用UI界面的角度来进行分析的；把一些可复用的UI元素，抽离为单独的组件，便于项目的维护和开发。

+ 组件化的好处：随着项目规模的增大，手里的组件越来越多，很方便就可以把现有的组件，拼接成一个完整的页面。

+ Vue是如何实现组件化的：通过.vue文件，来创建对应的组件：

1.  
   + template  结构
2.  
   + script     行为
3.  
   + style      样式

+ React是如何实现组件化的：React中有组件化的概念，但是并没有像Vue这样的组件模板文件；React中，一切都是以JS来表现的。因此要学习React，JS要合格，ES6和ES7（async和await）要会用

（2）移动APP开发体验方面

• Vue，结合Weex这门技术，提供了迁移到移动端APP开发的体验（Weex目前只是一个小的玩具，并没有很成功的大案例，主要是阿里系的应用在使用）
•  React，结合ReactNative，也提供了无缝迁移到移动APP的开发体验（RN用的最多，也是最火最流行的）

2．React中的几个核心概念

（1）虚拟DOM

• DOM本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的api（浏览器提供的）
• 什么是React中的虚拟DOM：是框架中的概念，手动用JS对象来模拟页面上的DOM元素和DOM的嵌套关系（框架提供的）
• 为什么要实现虚拟DOM（虚拟DOM的目的）：为了实现页面中，DOM元素的高效更新。
• DOM树的概念： 一个网页呈现的过程： 1、浏览器请求服务器获取页面html代码 2、浏览器要先在内存中解析DOM结构，并在浏览器内存中，渲染出一颗DOM树 3、浏览器把DOM树，呈现到页面上
• 总结：什么是虚拟DOM？
  本质：用JS对象的形式，来模拟页面上DOM元素和嵌套关系（虚拟DOM是以JS对象的形式存在的） 目的：实现DOM元素的高效更新

（2）Diff算法

• tree diff：新旧两颗DOM树，逐层对比的过程，就是Tree Diff；当整颗DOM逐层对比完毕，则所有需要被按需更新的元素，必然能够找到
• component diff：在进行tree diff的时候，每一层中，组件级别的对比，叫作component diff；
• 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新；
• 如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上；
• element diff：在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫作element diff；

3．构建基本的webpack4.x项目

• 因为webpack是基于Node构建的，所以webpack支持所有Node的api和语法
• 在webpack4.x中，有一个很大的特性，就是约定大于配置 约定的默认打包入口是/src/index.js
• 构建步骤

  1、运行npm init -y快速初始化项目

  2、在项目根目录创建src源代码目录和dist产品目录

  3、使用cnpm安装webpack，运行cnpm install webpack -D以及cnpm install webpack-cli -D

  4、Webpack4.x提供了约定大于配置的概念，目的是为了减少配置文件的体积；默认约定的 打包的入口是/src/index.js；打包的输出文件是/dist/main.js

  5、Webpack4.x 新增了mode选项（必填项），可选值为development和production

  6、为了方便运行，配置实时打包编译工具->webpack-dev-server。    cnpm install webpack-dev-server -D

  7、Webpack-dev-server打包好的main.js是托管到了内存中，在项目根目录的物理磁盘中看不到；但是我们可以认为，在项目根目录中，有一个看不见的mian.js

  8、Webpack-dev-server打包后打开的首页是项目根目录，而不是src目录下的index.html。 为了让打包编译后的网页自动打开index.html，就需要用到HtmlWebpackPlugin插件，来在项目根目录下生成index.html。安装并在webpack.config.js的module.exports中配置plugins。

4．在项目中使用React

（1）什么是React和React-dom

• React：专门用来创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
• React-dom：专门进行DOM操作的，最主要的应用场景就是ReactDOM.render()

（2）React创建虚拟DOM元素

• 在JS文件中，默认不能写HTML的标签，否则会打包失败。这个时候需要使用babel来转换这些JS中的标签
• 注意，在JS中混合写入类似于HTML的语法，叫作JSX的语法（符合XML规范的JS）
• SX语法的本质，还是在运行的时候，被转换成了React.createElement的形式来执行的（通过babel转换）

•  配置babel的步骤

  • 安装所需的bebel包
  • 在webpack.config.js中配置babel，将babel配置在第三方匹配规则中（module下的rules中）
  • 在项目根目录中编写babel的配置文件->.babelrc，这是一个json的配置文件，所以要符合json语法规则。
  • 在.babelrc中配置babel用到的语法规则和插件
• 当要在JSX代码中使用JS表达式时，需要用大括号将JS表达式框起来

5．React中创建组件

（1）第一种创建组件的方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX的虚拟DOM。

• 创建组件

1.  
   //第一种创建组件的方式
2.  
    
3.  
   function Hello(props)
4.  
    
5.  
       //如果在一个组件中 return 一个 null。则表示此组件是空的，什么都不会渲染
6.  
    
7.  
       // return null
8.  
    
9.  
       //在组件中，必须返回一个合法的JSX虚拟DOM元素
10.  
     
11.  
        return <div>这是 Hello 组件 --- props.name --- props.age --- props.gender</div>
12.  
     
13.  
        //无论是vue还是React，组件中的props永远都是只读的，不能被重新赋值
14.  
     
15.  

• 为组件传递数据

1.  
    
2.  
   ReactDOM.render(
3.  
    
4.  
       <div>
5.  
    
6.  
           /*直接把创建的组件名称，以标签的形式，丢到页面上即可*/
7.  
    
8.  
           <Hello name=dog.name age=dog.age
9.  
    
10.  
                   gender=dog.gender></Hello>
11.  
     
12.  
        </div>
13.  
     
14.  
        , document.getElementById(‘parent‘))

• this.props对象的属性

  1、 history：用来跳转路由 路径

  2.、Match：匹配结果，如果匹配上就是对象，匹配不上就是null

  3、Location：当前路径 pathname当前路径名

• 父组件向子组件传递数据
• 使用...obj属性扩散传递数据
• 将组件封装到单独的文件中
• 注意：组件的名称首字母必须是大写
• 如何省略.jsx后缀名

1.  
   //打开webpack.config.js，并在导出的配置对象中，新增如下节点 resolve:
2.  
    
3.  
           extensions: [
4.  
    
5.  
               ‘.js‘, ‘.jsx‘, ‘.json‘
6.  
    
7.  
           ]//表示这几个文件的后缀名，可以省略不写（.js和.json是默认有的）
8.  
    
9.  
      

• 设置别名  resolve:

1.  
           //alias:别名；这里设置别名是为了让后续引用的地方减少路径的复杂度
2.  
    
3.  
           alias:
4.  
    
5.  
               ‘@‘: path.join(__dirname, ‘./src‘)
6.  
    
7.  
           
8.  
    
9.  
    

（2）第二种创建组件的方式

• 使用class关键字来创建组件
• 通过extends继承React.Component
• 每一个类中，都有一个构造器，如果我们没有手动指定构造器，那么，可以认为类内部有个隐形的，看不见的空构造器，类似于constructor()
• 构造器的作用就是，每当new这个类的时候，必然会 优先执行，构造器中的代码。
• 通过 new出来的实例 访问到的属性，叫作实例属性。构造器中的属性，是实例属性。
• 通过 构造函数 直接访问到的属性，叫作静态属性。在class中通过static关键字定义的属性是静态属性。
• 实例方法，通过 new出来的实例 访问到的方法，实际项目中使用较多
• 静态方法，通过 构造函数 直接访问到的方法，实际项目中使用到的不多。在class中通过static关键字定义的方法
• 注意：在class的 区间内，只能写 构造器、静态方法、静态属性和实例方法
• 注意：class关键字内部还是通过function的方式来实现的。所以说，我们把class关键字，称作 语法糖
• 通过extends关键字来实现继承，将共有的某些属性或方法放到父类中
• 在class关键字创建的组件中，如果想使用外界传递过来的props参数，不需接收，直接通过this.props.**来访问即可
• ES6的展开运算符【...】可以展开一个对象

（3）两种创建组件的方式的对比

• 使用class关键字创建的组件，有自己的私有数据（this.state）和声明周期函数，但是使用function创建的组件，只有props，没有自己的私有数据和生命周期函数
• 用构造函数创建出来的组件，叫作‘无状态组件’【无状态组件今后用得不多】
•  用class关键字创建出来的组件，叫作‘有状态组件’【今后用的最多】
• 有状态组件和无状态组件之间的本质区别就是：有无state属性，和有无生命周期函数
• 什么情况下使用有状态组件？什么情况下使用无状态组件？

  1、如果一个组件需要自己的私有数据，则推荐使用：class创建的有状态组件

  2、如果一个组件不需要私有的数据，则推荐使用：无状态组件

  3、React官方：无状态组件由于没有自己的state和声明周期函数，所以运行效率会比有状态组件稍微高一些

• 组件中的props和state/data之间的区别

  1、props中的数据都是外界传递过来的

  2、state/data中的数据，都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）

  3、 props中的数据都是只读的，不能重新赋值

  4、state/data中的数据，都是可读可写的

6．React-router

• 组件的this.props对象的属性

  1、history：用来跳转路由 路径

  2、Match：匹配结果，如果匹配上就是对象，匹配不上就是null

  3、Location：当前路径 pathname当前路径名

• 安装路由：cnpm install react-router-dom -S
• HashRouter

  1、什么叫 hash 地址，hash 地址就是指 # 号后面的 url

  2、假如有一个 Link 标签，点击后跳转到 /abc/def。

1.  
   BrowserRouter： http://localhost:8080/abc/def
2.  
    
3.  
   HashRouter： [<u>http://localhost:8080/#/abc/def</u>](http://localhost:8080/#/abc/def)

• 如果有服务器端的动态支持，建议使用 BrowserRouter，否则建议使用 HashRouter。

原因在于，如果是单纯的静态文件，假如路径从 / 切换到 /a 后，此时刷新页面，页面将无法正常访问，需要在服务器端进行相关配置

• Switch：只渲染一个匹配到的<路由组件>或<重定向组件>