React18学习笔记(六) React中的类组件,极简的状态管理工具zustand,React中的Typescript

一.React中的类组件

写在前面:

React的早期版本都是使用Class组件来阻止代码的,因此类组件的学习仅限了解和为可能的兼容老项目的场景做知识储备

1.什么是类组件?如何编写一个类组件

定义:通过JS中的类来组织组件的代码
步骤:

• 1.通过类属性state来定义状态数据
• 2.通过setState方法来修改状态数据
• 3.通过render来写UI模板(JSX语法)
  示例:

//App.js
import { Component } from 'react'
class Counter extends Component {//基类:Component//step1:定义状态变量state={count:0}//事件回调clickHandler=()=>{//step2:通过setState修改状态数据this.setState({count:this.state.count+1})}//3.UI模板(JSX)render(){return <button onClick={this.clickHandler} >{this.state.count}</button>}
}
*React18中可以把Counter作为子组件插入App中以显示效果

2.类组件的生命周期函数

定义:组件从创建到销毁的各个阶段自动执行的函数
常用且重要的2个生命周期函数:
      1).componentDidMount:组件挂载完毕时执行,使用场景:获取异步数据
      2).componentWillUnmount:组件卸载时自动执行,使用场景:清理副作用
示例:

//App.js
import { Component } from 'react'
class Counter extends Component {//基类:Component//step1:定义状态变量state={count:0}//事件回调clickHandler=()=>{//step2:通过setState修改状态数据this.setState({count:this.state.count+1})}/*生命周期*///组件渲染完毕时执行一次,发送网络请求componentDidMount(){console.log('组件渲染完毕了,发送网络请求...')this.timer=setInterval(()=>{console.log('定时器运行中...')},1000)}//组件卸载时执行,清理副作用,如清除定时器,清除事件绑定componentWillUnmount(){console.log('组件卸载了,清除副作用...')clearInterval(this.timer)}//3.UI模板(JSX)render(){return <button onClick={this.clickHandler} >{this.state.count}</button>}
}

3.类组件的组件通信

概念:类组件和Hooks编写的组件在组件通信的思想上完全一致

父传子:通过prop绑定数据
子传父:通过prop绑定父组件的函数,子组件调用
兄弟组件通信:状态提升

示例一:父传子:

//App.js
//父组件
class Parent extends Component{render() {return <Child msg="hello from Parent" />;}
}
//子组件
class Child extends Component{render() {return <div>子组件接收到的数据:{this.props.msg}</div>;}
}

示例二:子传父

//App.js
//父组件
class Parent extends Component{render() {const getSonMsg = (msg) => {console.log('父组件收到子组件的消息:', msg)}return <div><div>父组件</div><Child onGetSonMsg={getSonMsg} /></div>}
}
//子组件
class Child extends Component{render() {const sendMsg = () => {this.props.onGetSonMsg('hello from child')}return <div><div>子组件</div><button onClick={sendMsg}>点击子传父</button></div>}
}

二.zustand - 状态管理工具

官网:https://awesomedevin.github.io/zustand-vue/docs/introduce/start/zustand

1.基础用法

流程和redux一样:

• 创建store(新增状态数据和操作方法)
• 绑定到组件
• 在组件中使用状态数据和方法

示例:

const useStore=create((set)=>{return{//状态管理count:1,//修改状态变量的方法inc:()=>{set((state)=>({count:state.count+1}))}}
})function App(){//2.绑定store到组件count {count,inc}=usStore()return (<button onClick={inc}>{count}</button>)
}export default App

2.异步写法

zustand对异步的支持不需要特殊的操作,
直接在函数中书写异步逻辑,最后只需在调用set方法,传入新状态即可

const useStore=create((set)=>{return{//状态管理count:1,channelList:[]//修改状态变量的方法inc:()=>{set((state)=>({count:state.count+1}))}//异步方法fetchChannelList:async ()=>{const res=await fetch(URL)const jsonData=await res.json()//调用set方法更新状态变量set({channelList:jsonData.data.channels})}}
})function App(){//2.绑定store到组件count {count,inc}=useStore()count {channelList,fetchChannelList}=useStore()return (<button onClick={inc}>{count}</button><ul>{channelList.map(item=><li key={item.id}>{item.name}</li>)}</ul>)
}

3.切片模式

当单个store比较大的时候,可以采用切片模式对模块进行拆分组合,类似于模块化
示例:把上例中的两个useStore拆分成子模块

//App.js
import {create} from 'zustand'
//1.创建counter相关的切片
const createCounterStore=(set)=>{return{//状态管理count:1,//修改状态变量的方法inc:()=>{set((state)=>({count:state.count+1}))}}
}const createChannelStore=(set)=>{return{//状态管理count:1,channelList:[]//修改状态变量的方法inc:()=>{set((state)=>({count:state.count+1}))}//异步方法fetchChannelList:async ()=>{const res=await fetch(URL)const jsonData=await res.json()//调用set方法更新状态变量set({channelList:jsonData.data.channels})}}
}//3.组合切片
const useStore=create((...a)=>({...createCounterStore,...createChannelStore
}))function App(){//2.绑定store到组件count {count,inc}=useStore()count {channelList,fetchChannelList}=useStore()return (<button onClick={inc}>{count}</button><ul>{channelList.map(item=><li key={item.id}>{item.name}</li>)}</ul>)
}export default App

三.React中的Typescript