这是我参与8月更文挑战的第三天
1.组件介绍
- 使用React就是在使用组件
- 组件表示页面中的部分功能
- 组合多个组件实现完整的页面功能
- 特点：可复用、独立、可组合
2. 组件的两种创建方式 2.1 使用函数创建组件
- 使用js的函数（箭头函数）创建的组件
- 约定1：函数名称必须以大写字母开头 如果是小写字母开头则报错
- 约定2：函数组件必须有返回值，表示该组件的结构 (return null 也可以 只是什么都不渲染，但是不会报错)
- 渲染函数组件：用函数名作为组件标签名
- 组件标签也可以是双标签
function Hello(){
return(
<div>这是函数组件</div>
)
}
ReactDOM.render(<Hello/>,document.getElementById('root'))2.2 使用类创建组件
- 类组件：使用ES6 的class创建的组件
- 约定1：类名称必须以大写字母开头
- 约定2：类组件继承自React.Component父类，从而可以使用父类中提供的方法或属性
- 约定3：类组件必须提供render() 方法
- 约定4：render()方法必须有返回值 表示该组件的结构
class Hello extends React.Component{
render(){
return <div>Hello class Component！</div>
}
}
ReactDOM.render(<Hlello/>,document.getElementById('root'))2.3 抽离为独立的JS文件
思考：项目中的组件多了后，该如何组织这些组件那？ 选择1：将所有组件都写在一个js文件中 选择2：将所有组件都放到单独的js文件中 组件作为一个独立的个体，一般会放到一个单独的js文件中。
- 创建Hello.js
- 在Hello.js中导入React
- 创建组件（函数 或 类）
- 在Hello.js中导入该组件
- 在index.js中导入Hello组件
- 渲染组件
hello.js
代码语言：javascript复制import React from 'react'
class Hello extends React.Component{
render(){
return(
<div>这是第一个组件</div>
)
}
}
// 导出
export default Hello;index.js
代码语言：javascript复制// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 导入Hello组件
import Hello from './Hello'
ReactDOM.render(<Hello/>,document.getElementById('root'))
