React的组件,元素和实例

组件和元素的区别,以及实例

参考地址:https://www.jianshu.com/p/7bf3678c9503

摘录一些经典的论述

1.Elements Describe the Tree
2.DOM Elements
3.Component Elements
4.Components Encapsulate Element Trees
5.Components Can Be Classes or Functions
无论是函数还是类,从根本上说它们都是React的组件。他们将props作为输入,并将元素作为输出返回。

总结

元素是一个普通对象,用于描述您希望在DOM节点或其他组件方面在屏幕上显示的内容。
元素可以在其道具中包含其他元素。创建React元素很简单。一旦创建了一个元素,它就永远不会发生改变。
组件可以用几种不同的声明方式。它可以是一个带有render方法的类。或者,在简单(你可以认为是没有状态)的情况下,可以将其定义为函数。
在任何一种情况下,它都将props作为输入,并返回一个元素树作为输出。
当一个组件接收一些props作为输入时,这是因为一个特定的父组件返回了一个元素及其类型和这些props。
这就是人们说props在React中以一种方式流动的原因:从父母到孩子。
在编写的组件类中,this就是指的实例。它对于存储本地状态和对生命周期事件做出反应非常有用。
功能组件根本没有实例。类组件有实例,但您永远不需要直接创建组件实例--React负责这一点。
最后,要创建元素,请使用React.createElement,JSX或元素工厂助手。不要在真实代码中将元素写为普通对象 - 只要知道它们是引擎盖下的普通对象。
原文地址:https://www.cnblogs.com/cn-oldboy/p/12749754.html