React学习整理

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:只渲染一个匹配到的<路由组件>或<重定向组件>
posted @ 2019-07-20 23:17  代码狂魔2019  阅读(624)  评论(0编辑  收藏  举报