欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入React技术栈之初入React世界

程序员文章站 2022-07-03 10:24:31
React作为受欢迎的前端框架之一,大多数人只会用而不理解其原理,本系列属于笔记,来源于深入React技术栈,并会适时加入补充内容,以便读者能理解React底层实现,包括virtual DOM机制、生命周期等。 ......


1.1 react简介

  react并不是完整的mvm/mvvm框架,专注于提供清晰、简洁的view层解决方案。

  传统开发模式,要更新页面需要手动操作dom元素。如图1.1所示,react在dom上封装了一层,把react并不是完整的mvm/mvvm框架,专注于提供清晰、简洁的view层解决方案。

  传统开发模式,要更新页面需要手动操作dom元素。如图1.1所示,react在dom上封装了一层,把dom树转化为javascript对象树,即virtual dom,每次数据更新,更新virtual dom,并和之前的virtual dom做对比,对变化部分做批量更新。dom树转化为javascript对象树,即virtual dom,每次数据更新,更新virtual dom,并和之前的virtual dom做对比,对变化部分做批量更新。

深入React技术栈之初入React世界

图1.1 react dom更新

 

1.2 jsx语法

  在virtual dom树中,创建的虚拟元素分为两类,dom元素和组件元素,分别对应着原生dom元素与自定义元素。
  virtual dom其实就是带有描述的json树,通过递归的方式根据每个结点描述进行渲染,得到dom树。
  jsx将html语法加入到javascript代码中,再通过编译器如babel转化到纯javascript后由浏览器执行,jsx语法使对组件结构的描述更加简洁,不然自己就得写出json对象树。
  在jsx中,html标签首字母小写,对应dom元素,组件元素的首字母大写。在一个组件的子元素位置使用注释要用{}包起来,如{/*xxxxx*/}的形式。
  在jsx中,dom元素的属性都是标准规范属性,但由于class和for是js关键字,因此用classname和htmlfor代替。省略bool值,则默认为true,如<checkbox checked>。
  react会将所有显示到dom的字符串转义,防止xss。可通过dangerouslysetinnerhtml属性去除。


1.3 react组件
  react组件基本由3个部分组成——属性(props)、状态(state)以及生命周期方法。一旦接受到的参数或自身状态有所改变,react组件会执行相应的生命周期方法,最后渲染。
  react组件构建上提供3种方法,react.createclass、es6 classes和无状态函数。

1.4 react数据流
  把react组件看成函数,它接受prop作为参数,内部由state作为函数的内部参数,返回一个virtual dom的实现。
  setstate是异步方法,一个周期内所有的state方法会合并操作。
  prop类型:

  1.   react组件有一个内置prop,children,代表子组件集合。react.children提供了一系列操作children的方法。
  2.   组件prop。将子组件以prop的形式传递。
  3.   function prop,回调函数,用于子父组件通信,比如子组件向父组件返回值。

  proptypes可限制prop类型与必须的状态。
1.5 react组件生命周期
  react生命周期分为两个过程:当组件在挂载或卸载时;当组件接收新的数据,即组件更新时。
  挂载和卸载:
  componentwillmount(),componentdidmount(),componentwillunmount()。其中componentwillmount在render方法之前执行,componentdidmount在render方法之后,组件挂载主要做组件状态的初始化。
 数据更新过程:
 组件自身的state更新时,依次执行shouldcomponent、componentwillupdate、render和componentdidupdate,可以通过在shouldcomponent中返回false阻止渲染。如果组件是由父组件更新props而更新的,在shouldcomponent方法之前会执行componentwillreceiveprops方法。
1.6 reactdom
  只有在顶层组件以及由于react模型所限而不得不操作dom的时候才会使用。
  finddomnode,返回react组件实例对应的dom结点。
  react最终要将渲染的virtual dom渲染到浏览器dom中,就要使用render方法:reactcomponent render(reactelement element,domelement container,[function callback])。
  对于dom操作,不仅可以使用finddomnode获得该组件dom,还可以使用refs获得组件内部的dom,例如:
<comp ref=’mycomp’>,可以通过this.refs.mycomp获得引用,对于原生dom,ref获得的是dom结点引用,react 组件元素,获得的是组件实例的引用。为了防止内存泄漏,组件卸载时,记得将所有的refs设为null。