前言
为了不浪费大家时间，我还是有义务说明下：
本文自己只是对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
总结
React_元素组件实例_关系图.jpg
上图是我对于三者关系的一个简单表示，即
元素可以表示为组件，组件也有对应的元素表示，组件可以通过实例化形成实例。
参考：
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
网友评论