使用react就是在使用react的组件
组件：可复用性，独立性，可组合性
函数组件
注意：
1.函数名必须大写字母开头
2.函数组件必须有返回值,表示组件结构
function Fn(){
return(
<div>函数组件</div>
)
}
//es6写法:
const Fn = ()=><div>函数组件</div>
ReactDOM.render(<Fn></Fn>,document.getElementById('root'))//函数名作为标签 渲染
例
类组件
使用es6语法的class创建的组件
注意:
1.类组件应该继承React.Compontent父类
2.类组件必须提供render（）方法
3.render方法里必须用return（）返回值
class Fn extends React.Component{
render(){
return(
<div>类组件</div>
)
}
}
一般我们一个组件写一个js文件,然后需要用那个组件的时候导入那个组件
image.png
例
| 区别 | 函数组件 | 类组件 |
|---|---|---|
| 是否有 this | 没有 | 有 |
| 是否有生命周期 | 没有 | 有 |
| 是否有状态 state | 没有 | 有 |
类组件的性能消耗比较大因为需创建实例
网友评论