Erlo

react学习笔记

时间:2021-02-23   阅读:7次   来源:开源中国
页面报错
点赞

react学习笔记

  1. react介绍

react是用来构建用户界面的javascript UI库,它只关注视图层。

2. react特点

  • 声明式编码
  • 组件化编码
  • 高效渲染
  • 可以使用reactnative编写移动端开发应用

这里需要注意声明式编码与原来命令式编码有啥区别:

通俗来讲命令式编码做任何一件事都需要亲力亲为才能实现,反而声明式编码只需要告诉我需要什么,至于怎么做不需要自己亲自实现,都是交给框架来做。从这可以看出声明式编码让开发者更加高效,代码更加简洁。

react高效原因?

采用虚拟DOM,不是直接去操作dom,使用dom diffing算法,计算出需要更新dom, 从而减少页面绘制

3. react开发相关核心库

  • react.js (react核心库)
  • react-dom (提供react操作dom扩展库)
  • babel.js (将jsx语法转换成标准的javascript代码)

4. 创建虚拟dom两种方式

    4.1 采用jsx语法来创建




	
	jsx创建虚拟DOM


	
	

  4.2 采用js创建(这种不推荐)




	
	使用js创建虚拟DOM


	
	

虚拟DOM与真实DOM区别:

  • 虚拟dom本质就是一个普通一般对象
  • 虚拟dom是由react来维护的,身上的属性相比真实dom要少很多,因此虚拟dom比真实dom更加`轻`
  • 虚拟dom最终都会由react转换成真实dom,最终呈现在页面上

5. jsx语法规则

jsx全称 Javascript xml,  react定义它类似为xml一种js扩展,本质就是React.createElement()语法糖.

jsx语法规则:

  • 定义虚拟dom时不能用引号
  • 在使用类class时,要用className
  • 在使用内联style时,要用{{key:value}}
  • 在虚拟dom中使用js表达式时,要使用{}
  • 只能有一个根标签
  • 标签必须要闭合
  • 标签首字母:1. 如果标签首字母是小写,那么react会将该标签转换成html标签去寻找,如果未找到就会报错。2. 如果标签首字母是大写,那么会去渲染该组件,如果未找到就会报错。

6. 模块与组件,模块化与组件化理解

    6.1 模块

         模块:向外提供一个特定功能的js程序,一般就是js文件

        为啥需要拆分模块:随着业务逻辑复杂,代码量越来越多

        作用:复用js代码,简化js编码,提高js运行效率

    6.2 组件

       组件:实现某个局部功能的代码和资源集合(html/css/js/png)

       为啥需要组件: 由于页面功能复杂性,需要拆分成多个组件

       作用:提高代码复用率,高效开发

   6.3 模块化

      通俗来讲就是将一个应用拆分成多个模块来编写就称为模块化

   6.4 组件化

      通俗来讲就是将某个功能拆分成多个组件来编写就称为组件化

不管是组件化还是模块化都是为了提高代码复用率、降低耦合、简化代码编写、提高开发效率

7. 创建组件两种方式

  •    函数式组件         



	
	1_函数式组件


	
	

ReactDOM.render()这个过程做了些啥? React首先会去解析这个组件,发现这个组件是函数定义的,那么会调用这个函数,将返回虚拟DOM转换成真实dom呈现在页面上.

  • 类式组件



	
	2_类式组件


	
	

ReactDOM.render()这个过程做了啥? react解析组件标签,发现组件是类来定义的,那么会通过new方式来创建组件实例,然后在根据实例调用原型上render()方法,将返回虚拟dom转换成真实dom呈现在页面上。

这里需要注意的是:组件名需要首字母大写,组件只有一个根标签,标签需要闭合。

8.组件三大核心属性

   8.1 state

       理解: state是组件最重要属性,它是一个对象(可以包含多个key,value 键值对),组件被称为`状态机`,通过更新组件的state来对应界面更新(render()方法被调用,重新渲染组件),state不能直接更新和修改,只能调用this.setState()方法来更新。这里需要说明一下函数组件是不能使用state, 应此函数组件又称为无状态组件。(由于react提供新功能hook,它可以在函数中使用state,这在后面会详细说)

  8.2 props

        理解:每个组件对象上都有一个props属性(全称properties),组件对象上所有属性都会保存到props上

        作用:用来组件之间传递数据,组件之间传递方向是由外到内(父亲->孩子),并且数据流是单向的,因此我们不应该在内部去修改props,这样会影响外部数据,导致数据发生混乱,不容易理解。

       谈到props这里需要提一下相关一个库props-type,这个库是用来限制props传递数据类型。




	
	对props进行限制


	
	

函数组件是如何使用props:




	
	对props进行限制


	
	

    8.3 ref

          理解:组件内标签可以通过ref来标示自己

          作用:在某些情况下,需要在典型数据流之外强制修改子组件,子组件可能是组件实例,也可能是一个dom元素

         我们应该避免使用refs任何可以用声明式完成的功能,常见使用场景(管理焦点、使用第三方的dom、触发强制动画)

        使用方式有三种:

        8.3.1 通过React.createRef()来创建,并且将值附属到组件实例上。这样就可以随意使用了

myRef = React.createRef();

      8.3.2 通过回调refs方式来创建

       不同于createRef()传递refs属性,它会传递一个函数。这个函数接收React组件实例或者一个DOM元素,以便他们在其他地方存取与访问

       

 

 

 

 

提交留言

评论留言

还没有评论留言,赶紧来抢楼吧~~

吐槽小黑屋()

* 这里是“吐槽小黑屋”,所有人可看,只保留当天信息。

  • Erlo吐槽

    Erlo.vip2021-03-09 08:01:49Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部

    给这篇文章打个标签吧~

    棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认