您的位置：首页 > Web前端 > React

Component & Element & ReactClass

2017-04-05 21:07 459 查看
本文主要阐述下react中，
Component
& 
Element
& 
ReactClass
之间的关系

下面看一段基本的代码

demo.js

import {Component} from 'react'
export deault class Demo extends Component{
render(){
return <div>{this.props.name}</div>
}
}


index.js

import React from 'react'
import Demo from './demo.js'

React.render(
<Demo name='Jenny'/>,
document.body
)


在demo文件中，我们通过ES6的语法，通过
extends
继承
Component
，自定义了一个组件类。here，
Component
可以理解为基类,
Demo
类通过继承Component而来，所以Demo实例化之后的对象可以访问到由Component继承而来的属性和方法，如
setState
forceUpdate和props
等.

在
index.js
文件中，
<Demo name='Jenny'/>
即为创建
Element
的过程.通过这种语法实例化，得益于
JSX
。抛弃
JSX
，我们还可以通过以下的方式来创建
ELement
：

/**React.createElement(
type,
[props],
[...children]
)**/
React.createElement(Demo, {name:'Jeny'})


在使用
createElement
的时候，type参数可以是例如
div
span
这样的标签字符串，也可以是一个
React Component
(可以是由
Component继承而来的一个组件类，也可以是一个纯函数式组件
，这里有一个问题：为什么使用函数式组件时，在内部访问不到
this
)

其实第一个
type
参数即为
Component
的标识，像
div
span
其实是React内部自建好的Coponent，从 
div
到 
svg
，包含了几乎所有 
HTML Tags


When an element type starts with a lowercase letter, it refers to a built-in component like
or and results in a string ‘div’ or ‘span’ passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

注：

即使是通过JSX来创建
Element
，在编译之后，还是会转为
React.createElement
的形式**

react
自定义组件首字母大写并不是必须的，只是结合JSX语法时，才需要遵守此规定(上面摘自官方文档react中JSX语法介绍)。当有首字母小写的自定义组件时，跳过JSX，直接通过
React.createElement
来创建
Element
即可

Element

react在解析的时候，无论是遇到
div
这样的
build-in component
,还是首字母大写的自定义组件，都会调用
React.createElement
来为其创建
element
.不同形式的
element
可以相互混合。

render方法的返回值，其实就是不同种类
element
的集合，即一棵
element tree
，这棵树描述这着
DOM的形态结构


注：组件的实例化，更新以及销毁，全由react管理，我们只是使用element来描述他们。react负责管理这些实例

element
一旦创建，就是不可更改的，就如immutable

element
并不是
component
的实例，他只是一个简单的对象，我们不能在
element
上调用任何实例的方法

Functional components
是没有实例的。只有以类的形式声明的
react
组件才有实例，而我们不需要去实例化，这个过程是交给react来管理的。在以类的形式声明component时，内部的
this
即指向实例

无论是何种形式的react组件，他们都以
props
作为输入，以
element
作为输出

更多关于createElement

Reference

Understanding the Difference Between React Elements and Components

react-components-elements-and-instances.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航