前言
为了不浪费大家时间,我还是有义务说明下:
本文自己只是对React 组件、元素、实例的梳理,可能参考里面有你想要的东西。
元素
元素在React中,不是直接的真实的DOM,而是存在于React的虚拟DOM中,通过虚拟DOM和算法,进而渲染真实的DOM。
在React中,一个元素是一个普通对象,他描述一个组件实例和它所要求的属性,或者一个DOM节点和它所要求的属性。
对于描述一个组件实例和它所要求的属性的元素,称为组件元素。
对于描述一个DOM节点和它所要求的属性的元素,称为DOM元素。
一个或多个元素组成的元素树,被封装成一个组件,那么在使用该组件时,就会有该组件的组件描述,即组件元素。
组件
组件也分为Component组件和Function组件。
对于Component组件,它是可以形成实例,当然它也是元素集合。
而Function组件 ,它是不能形成实例,只是单纯的元素集合。
实例
组件实例
instance
是你在所写的组件类component class
中使用关键字this
所指向的东西。它用来存储本地状态和响应生命周期事件很有用。——来自译文
只有组件实例化后,每一个组件实例才有了自己的props和state,才持有对它的DOM节点和子组件实例的引用。在传统的面向对象的开发方式中,实例化的工作是由开发者自己手动完成的,但在React中,组件的实例化工作是由React自动完成的,组件实例也是直接由React管理的。换句话说,开发者完全不必关心组件实例的创建、更新和销毁。
——作者:iKcamp https://juejin.im/post/5ac42e17f265da239e4e491a
总结
上图是我对于三者关系的一个简单表示,即
元素可以表示为组件,组件也有对应的元素表示,组件可以通过实例化形成实例。
参考:
https://zh-hans.reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
https://blog.csdn.net/andy_zhang2007/article/details/79396018
https://juejin.im/post/5ac42e17f265da239e4e491a