1. 组件
React 的特点之一就是组件化,组件是用来实现特定或局部功能效果的代码集合(html/css/js),在我们编写一个页面时,往往可以将不同部位进行拆分,拆分的部分就称为组件。
同样的,组件拆分也可以复用代码,简化项目编码,提高运行效率。
2. 自定义组件的两种方式
React 中组件有两种方式,分别为工厂函数组件
和ES6 类组件
。
下面分别使用这两种方式定义组件,并向页面输出元素。
<!-- ... -->
<div id="example1"></div>
<div id="example2"></div>
<script type="text/javascript" src="../build/react.development.js"></script>
<script type="text/javascript" src="../build/react-dom.development.js"></script>
<script type="text/javascript" src="../build/babel.min.js"></script>
<script type="text/babel">
// 1. 定义组件
// 方式1: 工厂函数组件(简单组件)
function MyComponent() {
return <h2>工厂函数组(简单组件)</h2>
}
// 方式2: ES6类组件(复杂组件)
class MyComponent2 extends React.Component {
render () {
console.log(this)
return <h2>ES6类组件(复杂组件)</h2>
}
}
// 2. 渲染组件标签
ReactDOM.render(<MyComponent />, document.getElementById('example1'))
ReactDOM.render(<MyComponent2 />, document.getElementById('example2'))
</script>
<!-- ... -->
上面的两种方式向页面输出了数据:
在自定义组件时,需要注意下面的几点:
- 组件名必须首字母大写
- 虚拟 DOM 元素只能有一个根元素
- 虚拟 DOM 元素必须有结束标签
3. 源码
本次文章源代码地址:https://github.com/Mayandev/react-tutorial/blob/master/code/react-component/react-component.html