react中的element、component、instance的理解

更新日期: 2019-07-07阅读: 2.2k标签: Component

element的实质

react中无论是class形式(render函数)还是function形式(return的内容)的组件,最后返回的jsx其实质是React.createElement函数的结果,而React.createElement函数返回的结果是一个对象树,我们可以称之为元素描述树,通过组件之间的组合搭配得到一颗较为完整的元素描述树。最后一步操作是Reactdom.render(element, root),该过程是向DOM树里面渲染react元素,根据React提供的元素描述树渲染出DOM节点并插入root节点,从这里我们可以发现element其实就基本就可以解释为Virtual DOM,是利用js对象的形式来描述一个DOM节点,描述一棵树。


使用element的原因:

element的出现是为了解决面向对象的UI编程的痛点,以往着这样的编程需要编程者自己组织子元素,具体如何组织就是在model里面的data发生变化时,需要去判断页面上展示哪些内容,如何展示,同时需要手动地去操作DOM节点实现DOM树的变化。

而现在可以通过元素描述树来表示。当然这一切的实现都是基于React框架的基础,React内部的diff算法替我们做好了一切操作,也就是说element起作用的基础就是diff算法。

我们在写React时一般是采用jsx的形式,这时返回的其实就是元素描述树,组织起来就是一颗virtual DOM tree,当setState的时候,React得到一颗新的virtual DOM tree,此时调用diff算法计算得到新的virtual DOM tree与旧树之间的差异,并根据计算出来的差异对DOM树进行patch操作,这样就得到了一棵全新的DOM tree,页面也就得到了需要展示的新内容。在这个过程中,不需要React使用者去做任何DOM节点的操作,只需要管理好数据变化即可,UI编程变得优美。

React之所以这样做,一方面是使React用户尽量少地写代码,由框架来替用户完成那些操作,另一方面,element tree是js对象树,对它的操作是很轻量级的,不像对真实DOM树的操作那样重,采用element之后大大提升了操作了效率。

    // React.render的内容其实就是一棵元素描述树,也就数一棵virtual DOM tree
    ReactDOM.render({
        type: Form,
        props: {
            isSubmitted: false,
            buttonText: 'OK!'
        }
    }, document.getElementById('root'))


component

component是我们编写出来的自定义组件,React可以通过React.createElement函数来得到一个元素描述树。


instance

instance是组件的实例,但是注意function形式的component没有实例,也没有生命周期,无法在function形式的component内部使用this,也无法在这个component的属性里面写ref属性


补充:

由于传统的UI编程返回的直接就是DOM对象,而在服务端是不存在DOM的,所以进行前后端同构不方便,但是在react中返回的是一个对象形式的element,也就是virtual DOM,这种对象在前后端都是可以共用的,这也为前后端同构提供有力的工具


链接: https://fly63.com/article/detial/5729

javascript字符串进行编码的方法:escape编码、encodeURI编码、encodeURIComponent编码

js对字符串进行编码的方法。ECMAScript v3 反对使用escape方法,用 encodeURI() 和 encodeURIComponent() 替代它。encodeURI对URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的。

使用纯粹的JS构建 Web Component

Web Component 出现有一阵子了。 Google 费了很大力气去推动它更广泛的应用,但是除 Opera 和 Chrome 以外的多数主流浏览器对它的支持仍然不够理想。Web Component 是一系列 web 平台的 API,它们可以允许你创建全新可定制、可重用并且封装的 HTML 标签,从而在普通网页及 web 应用中使用。

ReactJS Components: 基础指南

创建和管理React组件的各种方式,涌现的大量状态管理工具等等都是这些挑战的焦点。我们今天能做的就是在React(基于社区选择)中将最常用的做法引入桌面并讨论它们。

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

react如何通过shouldComponentUpdate来减少重复渲染

在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化

React中PureComponent 和 Component区别

我们来看一看 Component 和 PureComponent 的区别,我们先从问题出发,通过解决实际的问题来查询出 PureComponent 和 Component 之间区别。这里创建 Greeting 的组件,其中我们用 setInterval 每间隔 2 秒就更新状态title一次

如何评价 Vue 的 Function-based Component?

react 的不可变,纯函数。直接导致 hooks 必须使用 const 关键字,不能是 let,这也是 hooks 的奇迹之一;Hooks对Fiber更好 -> Hooks是Fiber的产物 -> 没有Fiber就不是Hooks

React Server Component 可能并没有那么香

前段时间 React 团队发布了一项用于解决 React 页面在多接口请求下的性能问题的解决方案 React Server Components。当然该方案目前还在草案阶段,官方也只是发了视频和一个示例 demo 来说明这个草案。

Vue.js 中使用defineAsyncComponent 延迟加载组件

使用 Vue 3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。这是改善初始页面加载的好方法,因为我们的应用程序将以较小的块加载,而不必在页面加载时加载每个组件。

Web Components中引入外部CSS的8种方法

开发中,还是会遇到需要引入外部CSS到Shadow DOM情况,那么如何处理呢?作者就最近遇到的情况给出如下几种方案。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!