React系列---React(一)初识React
React系列---React(二)组件的prop和state
React系列---React(三)组件的生命周期
React是Facebook推出的一个JavaScript库,它的口号就是“用来创建用户界面的JavaScript库”,所以它只是和用户界面打交道,可以把它看成MVC中的V(视图)层。
React三大特性
组件
React的一切基于组件。使用React,唯一要关心的就是构建组件。各个组件有各自的状态,状态变更时,会自动重新渲染组件。组件特性也是Web前端发展的趋势。
一个Profile组件的例子:
// Profile.jsx
import React from 'react';
export default Class Profile extends React.Component {
render() {
return (
<div className="profile-component">
<h2>Hi, I am {this.props.name}</h2>
</div>
)
}
}
其他组件中,可以像HTML标签一样引用它:
import Profile from './profile';
export default function(props) {
return (
<Profile />
)
}
JSX
上面的render方法中,有一种直接把HTML嵌套在JS中的写法,被称作JSX。这种语法结合了JavaScript和HTML的优点,即可以像平常一样使用HTML,也可以在里面嵌套JavaScript语法,运行时,Babel等工具会将JSX编译成JavaScript语法。
用HTML这种语义化的方式代替写JavaScript,总让人惬意许多。
Virtual DOM
React的设计中,开发者基本上无需操纵实际的DOM节点,每个React组件都是用Virtual DOM渲染的,可以看成是一种用JavaScript实现的内存DOM抽象。React在Virtual DOM上实现了一个Diff算法,渲染组件时,会高效的找出变更的节点,刷新到实际DOM上。
理解React特性
理解Virtual DOM
Web页面是由一个个HTML元素嵌套组合而成的。当使用JavaScript来描述这些元素时,这些元素可以简单地被表示成纯粹的JSON对象的。
比如现在需要描述一个按钮(button),我们都知道,HTML语法如下:
<button class="btn btn-blue">
<em>Confirm</em>
</button>
其中包括了元素的类型和属性。我们可以用这样一个JSON对象去表达这个按钮:
{
type: 'button',
props: {
className: 'btn btn-blue',
children: {
type: 'em',
props: {
children: 'Confirm'
}
}
}
}
这即是Virtual DOM的思想:将实际DOM节点抽象为内存中的JavaScript对象。
理解组件
当然,我们可以很方便地封装上述button元素,得到一种构建按钮的公共方法:
const Button => ({ color, text }) {
return {
type: 'button',
props: {
className: `btn btn-${color}`,
children: {
type: 'em',
props: {
children: text,
},
},
},
};
}
当我们要生成DOM元素中具体按钮时,就可以调用Button({color:'blue', text:'Confirm'})来创建。
仔细思考这个过程可以发现,Button方法其实也可以作为元素存在(上面的Profile组件,就是这一回事),方法名对应了DOM元素类型,参数对应了DOM元素属性,这样构建的元素就是React的组件元素。JSON结构描述这个组件的话,大概是这样:
{
type: Button,
props: {
color: 'blue',
children: 'Confirm'
}
}
这也是React的核心思想之一。因为有公共的表达方法,我们就可以让元素们彼此嵌套混合。这些层层封装的React组件元素,最终递归渲染出完整的DOM树。
React系列---React(一)初识React
React系列---React(二)组件的prop和state
React系列---React(三)组件的生命周期
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。