文:徐超,《React进阶之路》作者
受权宣布,转载请说明作者及出处
React 深切系列,深切讲解了React中的重点观点、特征和形式等,旨在协助人人加深对React的明白,以及在项目中越发天真地运用React。
React 中的元素、组件、实例和节点,是React中关系密切的4个观点,也是很轻易让React 初学者疑惑的4个观点。如今,老干部就来细致地引见这4个观点,以及它们之间的联络和区分,满足喜好句斟字嚼、寻根究底的同砚(老干部就是个中一员)的好奇心。
元素 (Element)
React 元素实在就是一个简朴JavaScript对象,一个React 元素和界面上的一部份DOM对应,形貌了这部份DOM的构造及衬着效果。平常我们经由历程JSX语法建立React 元素,比方:
const element = <h1 className='greeting'>Hello, world</h1>;
element是一个React 元素。在编译环节,JSX 语法会被编译成对React.createElement()的挪用,从这个函数名上也可以看出,JSX语法返回的是一个React 元素。上面的例子编译后的效果为:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
终究,element的值是相似下面的一个简朴JavaScript对象:
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
}
React 元素可以分为两类:DOM范例的元素和组件范例的元素。DOM范例的元素运用像h1、div、p等DOM节点建立React 元素,前面的例子就是一个DOM范例的元素;组件范例的元素运用React 组件建立React 元素,比方:
const buttonElement = <Button color='red'>OK</Button>;
buttonElement就是一个组件范例的元素,它的值是:
const buttonElement = {
type: 'Button',
props: {
color: 'red',
children: 'OK'
}
}
关于DOM范例的元素,由于和页面的DOM节点直接对应,所以React晓得怎样举行衬着。然则关于组件范例的元素,如buttonElement,React是没法直接晓得应当把buttonElement衬着成哪一种构造的页面DOM,这时候就须要组件自身供应React可以辨认的DOM节点信息,详细完成体式格局在引见组件时会细致引见。
有了React 元素,我们应当怎样运用它呢?实在,绝大多数情况下,我们都不会直接运用React 元素,React 内部会自动根据React 元素,衬着出终究的页面DOM。更确实地说,React元素形貌的是React假造DOM的构造,React会根据假造DOM衬着出页面的实在DOM。
组件 (Component)
React 组件,应当是人人最熟习的React中的观点。React经由历程组件的头脑,将界面拆分红一个个可以复用的模块,每个模块就是一个React 组件。一个React 运用由多少组件组合而成,一个庞杂组件也可以由多少简朴组件组合而成。
React组件和React元素关系密切,React组件最中心的作用是返回React元素。这里你或许会有疑问:React元素不该当是由React.createElement() 返回的吗?但React.createElement()的挪用自身也是须要有“人”担任的,React组件恰是这个“责任人”。React组件担任挪用React.createElement(),返回React元素,供React内部将其衬着成终究的页面DOM。
既然组件的中心作用是返回React元素,那末最简朴的组件就是一个返回React元素的函数:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Welcome是一个用函数定义的组件。假如运用类(class)定义组件,返回React元素的事情详细就由组件的render要领负担,比方:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
实在,运用类定义的组件,render要领是唯一必须的要领,其他组件的生命周期要领都只不过是为render效劳罢了,都不是必须的。
如今来斟酌下面这个例子:
class Home extends React.Component {
render() {
return (
<div>
<Welcome name='老干部' />
<p>Anything you like</p>
</div>
)
}
}
Home 组件运用了Welcome组件,返回的React元素为:
{
type: 'div',
props: {
children: [
{
type: 'Welcome',
props: {
name: '老干部'
}
},
{
type: 'p',
props: {
children: 'Anything you like'
}
},
]
}
}
关于这个构造,React 晓得怎样衬着type = ‘div’ 和 type = ‘p’ 的节点,但不晓得怎样衬着type=’Welcome’的节点,当React 发明Welcome 是一个React 组件时(推断根据是Welcome首字母为大写),会根据Welcome组件返回的React 元素决议怎样衬着Welcome节点。Welcome组件返回的React 元素为:
{
type: 'h1',
props: {
children: 'Hello, 老干部'
}
}
这个构造中只包含DOM节点,React是晓得怎样衬着的。假如这个构造中还包含其他组件节点,React 会反复上面的历程,继承剖析对应组件返回的React 元素,直到返回的React 元素中只包含DOM节点为止。如许的递归历程,让React 获取到页面的完整DOM构造信息,衬着的事情天然就瓜熟蒂落了。
别的,假如细致思索的话,可以发明,React 组件的复用,本质上是为了复用这个组件返回的React 元素,React 元素是React 运用的最基本构成单元。
实例 (Instance)
这里的实例特指React组件的实例。React 组件是一个函数或类,实际事情时,发挥作用的是React 组件的实例对象。只要组件实例化后,每个组件实例才有了本身的props和state,才持有对它的DOM节点和子组件实例的援用。在传统的面向对象的开辟体式格局中,实例化的事情是由开辟者本身手动完成的,但在React中,组件的实例化事情是由React自动完成的,组件实例也是直接由React治理的。换句话说,开辟者完整没必要体贴组件实例的建立、更新和烧毁。
节点 (Node)
在运用PropTypes校验组件属性时,有如许一种范例:
MyComponent.propTypes = {
optionalNode: PropTypes.node,
}
PropTypes.node又是什么范例呢?这表明optionalNode是一个React 节点。React 节点是指可以被React衬着的数据范例,包含数字、字符串、React 元素,或者是一个包含这些范例数据的数组。比方:
// 数字范例的节点
function MyComponent(props) {
return 1;
}
// 字符串范例的节点
function MyComponent(props) {
return 'MyComponent';
}
// React元素范例的节点
function MyComponent(props) {
return <div>React Element</div>;
}
// 数组范例的节点,数组的元素只能是其他正当的React节点
function MyComponent(props) {
const element = <div>React Element</div>;
const arr = [1, 'MyComponent', element];
return arr;
}
// 毛病,不是正当的React节点
function MyComponent(props) {
const obj = { a : 1}
return obj;
}
末了总结一下,React 元素和组件的观点最主要,也最轻易殽杂;React 组件实例的观点人人相识即可,险些运用不到;React 节点有肯定运用场景,但看过本文后应当也就不存在明白问题了。
下篇预报:
React 深切系列2:组件分类
新书引荐《React进阶之路》
作者:徐超
毕业于浙江大学,硕士,资深前端工程师,历久就任于动力物联网公司前景智能。8年软件开辟履历,熟习大前端手艺,具有雄厚的Web前端和挪动端开辟履历,特别对React手艺栈和挪动Hybrid开辟手艺有深切的明白和实践履历。