1.组件的介绍
介绍
:组件就是封装起来具有独立功能的ui部件,react推荐以组件的方式去思考ui的构成,将ui每一个功能独立的功能封装成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。
组件的特点
:
-
免代码冗余,提高代码利用率,组件可以重复调用
-
组件的属性props是只读的,调用者可以传递参数到props对象中定义属性
-
props传递是父子组件交互的唯一方式,通过传递一个新的props属性值使得子组件重新render渲染,从而达到父子组件通讯。
-
组件必须返回一个单独的根元素
组件的优势
:
-
组件可复用
-
可以封装成一个独立功能模块
-
多个组件可以组合成一个大的ui结构页面
2.组件的创建
函数组价
:使JS 的函数(或箭头函数)创建的组件,函数体内要返回元素
function Hello() {
return (
<div>这是我的第⼀个函数组件!</div>
)
}
// 渲染到跟组件中
render () {
return (
<Hello />
)
}
注意事项
:
-
函数名称必须以⼤写字⺟开头,使⽤⼤驼峰命名法
-
函数组件必须有返回值,表示该组件的结构
-
组件标签可以单闭合
类组件
:使⽤ ES6 的 class关键字 创建的组件
使用
:类组件应该继承 React.Component ⽗类,从⽽可以使⽤⽗类中提供的法和属性
注意
:
-
类名称也必须以⼤写字⺟开头,使⽤⼤驼峰命名法
-
类组件必须提供 render() ⽅法
-
render() ⽅法必须有返回值,表示该组件的结构
import React, { Component } from 'react'
import Home from './xxx/xxx/xxx'
class App extends Component {
constructor (props) {
super(props)
// 第一种定义初始化数据,需要动态改变的数据
this.state = {}
}
// 第二种定义数据的方式,就不需要再构造函数中定义
state = {}
render () {
return (
<div>
<Home />
</div>
)
}
}
export default App;
类组件和函数组件的去区别:
-
函数组件介绍父组件的参数是在函数的形参中接受,类组件是通过this.props来接受
-
类组件有this和生命周期和state,但是函数组件没有this和生命周期和state
-
类组件可以继承一些react内部自定义的功能组件,但是函数组件不可以