React入门系列(三)创建组件
React创建组件有两种模式,原生JavaScript和JSX语法,后者是React推荐的构组件方式,因为,它能更加精确得定义包含属性的树状结构。
1. 使用原生JavaScript创建组件
React框架提供了创建虚拟DOM的接口,React.createElement
,参数定义如下:
ReactElement createElement(
string/ReactClass type, --- 标签名
[object props], --- 属性
[children ...] --- 子节点
)
例如,创建一个红色的表示危险信号的按钮组件-DangerButton:
<script>
var TextSpan = React.createElement('span', {className: 'white'}, "Danger");
var DangerButton = React.createElement("button", {className: 'red'}, TextSpan);
ReactDOM.render(
DangerButton,
document.getElementById('container')
);
</script>
ReactDOM是渲染虚拟DOM组件的入口。
实际上,JSX最终被编译为可执行的JavaScript代码,就是由React.createElement()
来创建DOM组件。
2. 使用JSX语法创建组件
JSX语法创建的组件,以标签形式使用,这能让复杂的树型更易于阅读,优于纯JavaScript语法。并且,JSX也遵循JavaScript语义。
一般,有两种方式:方法创建和类创建。
(1) React.createClass
使用React.createClass
方法创建组件非常简单,关键点就是定义render
函数,这个函数用于定义虚拟DOM。
还以上面例子中的DangerButton为例,使用React.createClass
创建:
<script type="text/babel">
var DangerButton = React.createClass(
{
//JSX语法
render(){
return (<button className='red'><span className='white'>Danger</span></button>);
}
});
ReactDOM.render(
<DangerButton/>,
document.getElementById('container')
);
</script>
(2) 类创建
使用ES6中class
语法来创建组件,这种方式是React官方推荐的。因为,对于复杂组件,类模式能更加清晰和简明的定义组件功能已经数据处理。
用ES6语法来创建DangerButton:
<script type="text/babel">
class DangerButton extends React.Component {
render() {
return (<button className='red'><span className='white'>Danger</span></button>);
}
}
ReactDOM.render(
<DangerButton/>,
document.getElementById('container')
);
</script>
现在可能还感觉不到类模式组件的强大之处,等到了实际应用中,构造复杂组件时,会体会它的优势。
(3) 无状态函数
有一种纯函数态的组件,没有保持任何内部状态,没有生命周期方法,这样的组件,可以用函数定义。
其实,DangerButton就是这样的组件。
function DangerButton(props) {
return <button className="red"><span className="white">{props.name}</span></button>;;
}
ReactDOM.render(<HelloMessage name="danger" />, mountNode);
理想世界里组件都应该是无状态函数,因为这种模式可以避免做内存分配优化等额外工作,如果可能,这是推荐模式。
3. “容器组件”+“展示组件” = “组件”
这是创建组件的一种模式,如果引入redux,推进按照这种模式设计组件。
- 容器组件: 外层组件,负责和Redux Store通信,处理数据。
- 展示组件(傻瓜组件):内层组件,只专心负责渲染界面,根据props来传递数据。
“傻瓜组件”一般都是无状态函数。
小结
后续我们将进一步探讨React组件的生命周期函数。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- if语句与while语句
- 内网渗透 | 基于IPC的横向移动
- 【DB笔试面试866】队列等待之enq: TX - allocate ITL entry
- 【Vue.js】Vue.js组件库Element中的上传、评分、穿梭框和表单
- 【Vue.js】Vue.js项目构建
- 【Vue.js】Vue.js组件库Element中的表格、标签和进度条
- 用个小技巧,趁你不备,rm -rf你的电脑
- 什么是Python 中的EAFP 哲学
- 设计模式--工厂模式
- 设计模式--命令模式
- 安装FastDFS+Nginx
- Redis 中的 5 大数据类型及其常用命令手册
- 设计模式--适配器模式
- 设计模式--外观模式
- 设计模式--模板模式