五分钟学习React(六):元素(Element)和组件(Component)
2019-10-26 21:11
1511 查看
原文链接:https://www.mk2048.com/blog/blog.php?id=h02k0a10ihaa&title=%E4%BA%94%E5%88%86%E9%92%9F%E5%AD%A6%E4%B9%A0React%EF%BC%88%E5%85%AD%EF%BC%89%EF%BC%9A%E5%85%83%E7%B4%A0%EF%BC%88Element%EF%BC%89%E5%92%8C%E7%BB%84%E4%BB%B6%EF%BC%88Component%EF%BC%89
更多专业前端知识,请上【猿2048】www.mk2048.com
俗话说“万丈高楼平地起”,从这一期开始,我们将使用基于Webpack Babel的React学习React框架中的一些基础概念。在学习React的过程中经常会把Element、Class和Component这几个基础概念混淆。所以我们看看这些React的概念到底是干什么的,有什么作用。
1. 从ReactDOM.render说起
ReactDOM是React封装DOM的一个软件包,提供了DOM的一些特定方法。render方法就是将React element渲染到事先定义的容器中。
// render方法的定义 ReactDOM.render( element, container, [callback] )
我们可以把render方法理解为React应用的一个入口,这个方法首先通过判断element中虚拟DOM节点的markup是否是大写还是小写,从而建立相应的渲染。小写的虚拟DOM节点的makeup,我们称之为原生DOM元素,常见的如
div、
span等。而大写markup的虚拟DOM节点,我们称之为自定义DOM元素。对于原生DOM元素,render方法会直接创建HTML原生的DOM,而对于自定义的DOM元素,render方法会创建组件来定义。
2. Element的作用
所以简单的说,element就是React实现界面内容的最小单元,它代表了虚拟DOM中的一个对象。它描述了组件实例和DOM节点的关系在React中,通过使用React.createElment可以实现虚拟DOM节点。比如我们定义一个element:
const element = React.createElement( 'h1', {id: 'myElement'}, 'hello there!' )
当然也可以在元素中嵌套组件,由于这种特性,我们可以用元素来描述DOM节点树。
class myCompnent extends React.Component{ render(){ return ( <h1>hello there!<h1> ) } } const element = React.createElement( myCompnent, null, null )
3.组件
组件就是一个方法或者一个类,可以接受一定的输入,之后返回一个React 元素。
更多专业前端知识,请上【猿2048】www.mk2048.com
相关文章推荐
- React 组件Component,元素Element和实例Instance的区别
- React学习笔记_React中元素与组件的区别
- React学习笔记_无状态组件(Stateless Component) 与高阶组件
- 28vue学习——component 元素实现两个以上的组件切换
- Reactjs学习 -- factory、component和element
- React学习笔记——如何创建React组件
- React学习——ListView组件
- React学习(四)组件
- element-ui react Form 组件校验规则required=true失败
- spring源码学习之五 </context:component-scan>元素处理过程
- ReactNative学习-滑动查看图片第三方组件react-native-swiper
- react学习-受控组件(controlled components)
- react学习(6)——关于组件生命周期的问题
- [React网络整理]React之表单组件的学习笔记
- react 函数子组件(Function ad Child Component)
- react native组件学习之listview
- React学习之高级组件巴巴(二十三)
- Vue2学习笔记:组件(Component)
- JSX语法&React元素和组件的区别
- React Native学习-调取摄像头第三方组件:react-native-image-picker