React基础之类组件
React基础之类组件
类组件是基于ES6类来编写的组件，使用React.Component作为基类，并定义render方法，是一种定义组件的方式
实现按钮计数
import
{
Component
}
from
“react”
;
class Counter extends Component {
//1. 状态变量 2. 事件回调 3.UI （ JSX ）
//1. 定义状态变量
state ={
count: 0
}
//2. 定义事件回调
setCount =() => {
// 修改状态变量
this . setState ({
count: this . state . count + 1
})
}
render (){
{
return < button onClick = {this . setCount } > {this . state . count } </ button >
}
}
}
function
App
() {
return
(
<
div
className
=
“App”
<
Counter
/>
</
div
);
}
export default
App
;
类组件的生命周期函数
分为挂载时、更新时与卸载时
由于组件挂载时调用componentDisMount，适合用于其执行异步操作
componentWillUnmiunt在组件卸载时执行，适用于清除副作用如清除定时器等
import
{
Component
,
useState
}
from
“react”
;
class
Son
extends
Component
{
//
组件发生更新时
state
={
count:
0
}
setCount
=()
=>
{
this
.
setState
({
count:
this
.
state
.
count
1
})
}
//
组件更新时执行
componentDidUpdate
(){
console
.
log
(
'
组件更新了
'
);
}
//生命周期函数
//组件渲染完毕执行一次 如发送网络请求
componentDidMount
(){
console
.
log
(
'
发送网络请求
'
);
this
.
timer
=
setInterval
(()
=>
{
console
.
log
(
'
定时器运行中
'
);
},
1000
)
}
//
组件卸载的时候执行 如副作用清除器 清除定时器
componentWillUnmount
(){
console
.
log
(
'
执行卸载函数
'
);
//
清除定时器
clearInterval
(
this
.
timer
)
}
render
(){
return
<
div
Son
<
button
onClick
=
{this
.
setCount
}
{this
.
state
.
count
}
</
button
</
div
}
}
function
App
() {
const
[
show
,
setShow
]=
useState
(
true
)
return
(
<
div
className
=
“App”
{
show
&&
<
Son
/>
}
<
button
onClick
=
{
()
=>
{
setShow
(
false
)}
}
unmount
</
button
</
div
);
}
export default
App
;
类组件的组件通信
父传子：通过props绑定数据，通过this关键字发送数据，使用this.props来获取数据
import
{
Component
,
useState
}
from
“react”
;
//1.父传子，直接通过props子组件标签
class
Son
extends
Component
{
render
(){
//
使用
this.props.msg
return
<
div
Son
， {this . props . msg }
</
div
}
}
class
Parent
extends
Component
{
state
={
msg:
’this is parent msg'
}
render
(){
return
<
div
Parent
<
Son msg = {this . state . msg }
/></
div
}
}
function
App
() {
return
(
<
div
className
=
“App”
<
Parent
/>
</
div
);
}
export default
App
;
子传父：子组件标签生绑定父组件中的函数，子组件调用这个函数传递参数
子组件通过props来发送数据
import
{
Component
,
useState
}
from
“react”
;
//1.父传子，直接通过props子组件标签
class
Son
extends
Component
{
render
(){
//
使用
this.props.msg
return
<>
<
div
Son
，
</
div
<
button
onClick
=
{
()
=>
{
this
.
props
.
onGetSonMsg
(
'
我是
Son
中的数组
'
)}
}
发送数据给父组件
</
button
</>
}
}
class
Parent
extends
Component
{
getSonMsg
=(
sonMsg
)
=>
{
console
.
log
(
sonMsg
);
}
render
(){
return
<
div
Parent
，
<
Son
onGetSonMsg
=
{this
.
getSonMsg
}
/></
div
}
}
function
App
() {
return
(
<
div
className
=
“App”
<
Parent
/>
</
div
);
}
export default
App
;
兄弟间数据传输，就是将父传子与子传父相结合
import
{
Component
,
useState
}
from
“react”
;
class
Son1
extends
Component
{
state
={
msg:
'
这是来自
Son1
的数据，需要
Son2
接收
'
}
render
(){
//
使用
this.props.msg
return
<>
<
div
Son1
，
</
div
<
button
onClick
=
{
()
=>
{
this
.
props
.
onGetSon1Msg
(
this
.
state
.
msg
)}
}
发送消息
</
button
</>
}
}
class
Son2
extends
Component
{
render
(){
//
使用
this.props.msg
return
<>
<
div
Son2
，
{this
.
props
.
Msg
}
</
div
</>
}
}
class
Parent
extends
Component
{
state
={
Son1Msg:
''
}
getSon1Msg
=(
son1Msg
)
=>
{
console
.
log
(
'
接收到
Son1
的数据，现在发送给
Son2'
);
this
.
setState
({
Son1Msg:son1Msg
})
}
render
(){
return
<>
<
div
Parent
，
<
Son1
onGetSon1Msg
=
{this
.
getSon1Msg
}
/></
div
<
Son2
Msg
=
{this
.
state
.
Son1Msg
}
/>
</>
}
}
function
App
() {
return
(
<
div
className
=
“App”
<
Parent
/>
</
div
);
}
export default
App
;
