2024-07-11
技术小刊
00

目录

生命周期调用方法
React中的事件处理逻辑
React中D算法的原理
1.节点之间的比较
2.两个列表之间的比较
3.取舍
在React中元素(element)和组件(component)区别
如果组件具有状态(state)或生命周期方法,请使用类组件;否则,使用功能组件。
React中的key的重要性
约束性组件(controlled component)与非约束性组件(uncontrolled component)的区别
React的setState方法
当调用 setState的时候,发生了什么操作
setState方法的第二个参数是一个回调函数
React从EMAScript5编程规范到EMAScript6编程规范过程中的几点改变
附件细节点
React和vue.js的相似性和差异性

当今最流行的框架非 React莫属。 React以其岀色的性能,颠覆了互联网的理念,简单的开发方式受到许多开发者的青睐。
因此,在 React中,虚拟DOM、组件的生命周期、组件的通信、组件的约束性,配合 Reflux、 Redux等框架的使用,基于 EMAScript6语法开发,以及 Webpack编译等都是读者要掌握的内容。

生命周期调用方法

React生命周期分为三大周期,11个阶段,生命周期方法调用顺序分别如下。

(1)在创建期的五大阶段,调用方法的顺序如下。

  • getDetaultProps:定义默认属性数据。
  • getInitialState:初始化默认状态数据。
  • componentWillMount:组件即将被构建。
  • render:渲染组件。
  • componentDidMount:组件构建完成

Ajax请求应该写在组件创建期的第五个阶段componentDidMount, 可保证组件已经挂载,并且能够正常更新组件。

(2)在存在期的五大阶段,调用方法的顺序如下。

  • componentWillReceiveProps:组件即将接收新的属性数据。
  • shouldComponentUpdate:判断组件是否应该更新。

组件状态数据或者属性数据发生更新的时候,组件会进入存在期,视图会渲染更新。在生命周期方法 shouldComponentUpdate中,允许选择退出某些组件(和它们的子组件)的和解过程。

和解的最终目标是根据新的状态,以最有效的方式更新用户界面。如果我们知道用户界面的某一部分不会改变,那么没有理由让 React弄清楚它是否应该更新渲染。通过在 shouldComponentUpdate方法中返回 false, React将让当前组件及其所有子组件保持与当前组件状态相同。

  • componnentWillUpdate:组件即将更新。
  • render:渲染组件。
  • componentDidUpdate:组件更新完成。

(3)在销毁期的一个阶段,调用方法 componentWillUnmount,表示组件即将被销毀。

React中的事件处理逻辑

为了解决跨浏览器兼容性问题, React会将浏览器原生事件(Browser Native Event)封装为合成事件( Synthetic Event)并传入设置的事件处理程序中。

这里的合成事件提供了与原生事件相同的接口,不过它们屏蔽了底层浏览器的细节差异,保证了行为的一致性。另外, React并没有直接将事件附着到子元素上,而是以单一事件监听器的方式将所有的事件发送到顶层进行处理(基于事件委托原理)。

这样 React在更新DOM时就不需要考虑如何处理附着在DOM上的事件监听器,最终达到优化性能的目的。

React中D算法的原理

1.节点之间的比较

节点包括两种类型:一种是 React组件,另一种是HTML的DOM。

如果节点类型不同,按以下方式比较。

如果 HTML DOM不同,直接使用新的替换旧的。如果组件类型不同,也直接使用新的替换旧的。

如果 HTML DOM类型相同,按以下方式比较。

在 React里样式并不是一个纯粹的字符串,而是一个对象,这样在样式发生改变时,只需要改变替换变化以后的样式。修改完当前节点之后,递归处理该节点的子节点。

如果组件类型相同,按以下方式比较。

如果组件类型相同,使用 React机制处理。一般使用新的 props替换旧的 props,并在之后调用组件的 componentWillReceiveProps方法,之前组件的 render方法会被调用。

节点的比较机制开始递归作用于它的子节点。

2.两个列表之间的比较

一个节点列表中的一个节点发生改变, React无法很妤地处理这个问题。循环新旧两个列表,并找出不同,这是 React唯一的处理方法。

但是,有一个办法可以把这个算法的复杂度降低。那就是在生成一个节点列表时给每个节点上添加一个key。这个key只需要在这一个节点列表中唯一,不需要全局唯一。

3.取舍

需要注意的是,上面的启发式算法基于两点假设。

类型相近的节点总是生成同样的树,而类型不同的节点也总是生成不同的树

可以为多次 render都表现稳定的节点设置key。

上面的节点之间的比较算法基本上就是基于这两个假设而实现的。要提高 React应用的效率,需要按照这两点假设来开发。

在React中元素(element)和组件(component)区别

在 React中元素是页面中DOM元素的对象表示方式。在 React中组件是一个函数或一个类,它可以接受输入并返回一个元素。

工作中,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。在编译的时候,把它转化成一个 React. createElement调用方法。

createElement和 cloneElement区别

createElement是JSX被转载得到的,在 React中用来创建 React元素(即虚拟DOM)的内容。cloneElement用于复制元素并传递新的 props。

如果组件具有状态(state)或生命周期方法,请使用类组件;否则,使用功能组件。

React中的key的重要性

key可以帮助 React跟踪循环创建列表中的虚拟DOM元素,了解哪些元素已更改、添加或删除。

每个绑定key的虚拟DOM元素,在兄弟元素之间都是独一无二的。

在 React的和解过程中,比较新的虛拟DOM树与上一个虛拟DOM树之间的差异,并映射到页面中。key使 React处理列表中虛拟DOM时更加高效,因为 React可以使用虛拟DOM上的key属性,快速了解元素是新的、需要删除的,还是修改过的。如果没有key,React就不知道列表中虚拟DOM元素与页面中的哪个元素相对应。所以在创建列表的时候,不要忽略key。

约束性组件(controlled component)与非约束性组件(uncontrolled component)的区别

约束性组件( controlled component)就是由 React控制的组件,也就是说,表单元素的数据存储在组件内部的状态中,表单到底呈现什么由组件决定。

非约束性组件( uncontrolled component)就是指表单元素的数据交由元素自身存储并处理,而不是通过 React组件。表单如何呈现由表单元素自身决定。

虽然非约東性组件通常更容易实现,可以通过refs直接获取DOM元素,并获取其值,但是 React建议使用约束性组件。主要原因是,约東性组件支持即时字段验证,允许有条件地禁用/启用按钮,强制输入格式等。

React的setState方法

当调用 setState的时候,发生了什么操作

当调用 setState时, React做的第一件事是将传递给setState的对象合并到组件的当前状态,这将启动一个称为和解( reconciliation)的过程。
和解的最终目标是,根据这个新的状态以最有效的方式更新DOM。
为此, React将构建一个新的 React虚拟DOM树(可以将其视为页面DOM元素的对象表示方式)。
一旦有了这个DOM树,为了弄清DOM是如何响应新的状态而改变的, React会将这个新树与上一个虚拟DOM树比较。
这样做, React会知道发生的确切变化,并且通过了解发生的变化后,在绝对必要的情况下进行更新DOM,即可将因操作DOM而占用的空间最小化。

setState方法的第二个参数是一个回调函数

当 setState方法执行结束并重新渲染该组件时调用它。在工作中,更好的方式是使用 React组件生命周期之——“存在期”的生命周期方法,而不是依赖这个回调函数。

其他作用:可以用该函数来监听渲染是否完成。

React从EMAScript5编程规范到EMAScript6编程规范过程中的几点改变

  1. 创建组件的方法不同

EMAScript5版本中,定义组件用 React.createClass。
EMAScript6版本中,定义组件要定义组件类,并继承 Component类。

  1. 定义默认属性的方法不同

EMAScript5版本中,用 getDefaultProps定义默认属性。
EMAScript6版本中,为组件定义defaultProps静态属性,来定义默认属性。

  1. 定义初始化状态的方法不同

EMAScript5版本中,用 getInitialState定义初始化状态。
EMAScript6版本中,在构造函数中,通过this.state定义初始化状态。

  1. 定义属性约束的方法不同

EMAScript5版本中,用 propTypes定义属性的约束。
EMAScript6版本中,为组件定义propsTypes静态属性,来对属性进行约束。

  1. 使用混合对象、混合类的方法不同

EMAScript5版本中,通过mixins继承混合对象的方法。
EMAScript6版本中,定义混合类,让混合类继承Component类,然后让组件类继承混合类,实现对混合类方法的继承。

  1. 绑定事件的方法不同

EMAScript5版本中,绑定的事件回调函数作用域是组件实例化对象。
EMAScript6版本中,绑定的事件回调函数作用域是null。

  1. 父组件传递方法的作用域不同

EMAScript5版本中,作用域是父组件。
EMAScript6版本中,变成了null。

  1. 组件方法作用域的修改方法不同

EMAScript5版本中,无法改变作用域。
EMAScript6版本中,作用域是可以改变的。

附件细节点

在 Reducer文件里,对于返回的结果,必须要使用 Object.assign ( )来复制一份新的 state,否则页面不会跟着数据刷新。

React-Router的模式有HashRouter(通过散列实现,路由要带#)和BrowerRouter(利用HTML5中 history API实现, 兼容性不是很好)

React和vue.js的相似性和差异性

相似性如下:

  • (1)都是用于创建UI的 JavaScript库。
  • (2)都是快速和轻量级的代码库(这里指 React核心库)。
  • (3)都有基于组件的架构。
  • (4)都使用虚拟DOM。
  • (5)都可以放在单独的HTML文件中,或者放在 Webpack设置的一个更复杂的模块中。
  • (6)都有独立但常用的路由器和状态管理库。

它们最大的区别:

  • 在于 Vue. js通常使用HTML模板文件,而 React完全使用 JavaScript创建虚拟DOM。
  • Vue. js还具有对于“可变状态”的“ reactivity”的重新渲染的自动化检测系统。
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:seek

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!