1、React 组件介绍
组件是 React 的一等公民,使用React就是在用组件。
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点:可复用、独立、可组合
2、React 组件的两种创建方式
2.1 、使用函数创建组件
函数组件:使用JS的函数(或箭头函数)创建的组件。
约定1:函数名称必须以大写字母开头
约定2:函数组件必须有返回值,表示该组件的结构
如果返回值为null,表示不渲染任何内容
function Hello() {
return (
<div>这是我的第一个函数组件</div>
)
}
渲染函数组件:用函数名作为标签名
ReactDOM.render(<Hello />, 挂载点)
组件标签可以是单标签也可以是双标签
2.2、使用类创建组件
类组件:使用ES6的class创建的组件
约定1:类名称必须以大写字母开头
约定2:类组件应该继承 React.Component 父类,从而可以使用父类中提供的方法或属性
约定3:类组件必须提供 render() 方法,表示该组件的结构
约定4:render() 方法必须有返回值,表示该组件的结构
class Hello extends React.Component {
render () {
return (
<div>Hello class Component !</div>
)
}
}
2.3、抽离为独立 JS 文件
1、创建Hello.js
2、在Hello.js 中导入 react
3、创建组件(函数或类)
4、在 Hello.js 中导出该组件
5、在 index.js 中导入 Hello 组件
6、渲染组件