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;
