兄弟组件通信
实现思路: 借助
状态提升机制，通过共同的父组件进行兄弟之间的数据传递
- A组件先通过子传父的方式把数据传递给父组件App
- App拿到数据之后通过父传子的方式再传递给B组件
// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B
import {
useState } from "react"
function A ({
onGetAName }) {
// Son组件中的数据
const name = 'this is A name'
return (
<div>
this is A compnent,
<button onClick={
() => onGetAName(name)}>send</button>
</div>
)
}
function B ({
name }) {
return (
<div>
this is B compnent,
{
name}
</div>
)
}
function App () {
const [name, setName] = useState('')
const getAName = (name) => {
setName(name)
}
return (
<div>
this is App
<A onGetAName={
getAName} />
<B name={
name} />
</div>
)
}
export default App
跨层组件通信
实现步骤：
- 使用
createContext方法创建一个上下文对象Ctx - 在顶层组件（App）中通过
Ctx.Provider组件提供数据 - 在底层组件（B）中通过
useContext钩子函数获取消费数据
// App -> A -> B
import {
createContext, useContext } from "react"
// 1. createContext方法创建一个上下文对象
const MsgContext = createContext()
function A () {
return (
<div>
this is A component
<B />
</div>
)
}
function B () {
// 3. 在底层组件 通过useContext钩子函数使用数据
const msg = useContext(MsgContext)
return (
<div>
this is B compnent,{
msg}
</div>
)
}
function App () {
const msg = 'this is app msg'
return (
<div>
{
/* 2. 在顶层组件 通过Provider组件提供数据 */}
<MsgContext.Provider value={
msg}>
this is App
<A />
</MsgContext.Provider>
</div>
)
}
export default App
React副作用管理-useEffect
概念理解
useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）, 比 如发送AJAX请求，更改DOM等等
warning
说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于“只由渲染引起的操作”
基础使用
需求：在组件渲染完毕之后，立刻从服务端获取平道列表数据并显示到页面中
说明：
- 参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
- 参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次
接口地址：http://geek.itheima.net/v1_0/channels
useEffect依赖说明
useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现
| 依赖项 | 副作用功函数的执行时机 |
|---|---|
| 没有依赖项 | 组件初始渲染 + 组件更新时执行 |
| 空数组依赖 | 只在初始渲染时执行一次 |
| 添加特定依赖项 | 组件初始渲染 + 依赖项变化时执行 |
清除副作用
概念：在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用
说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行
import {
useEffect, useState } from "react"
function Son () {
// 1. 渲染时开启一个定时器
useEffect(() => {
const timer = setInterval(() => {
console.log('定时器执行中...')
}, 1000)
return () => {
// 清除副作用(组件卸载时)
clearInterval(timer)
}
}, [])
return <div>this is son</div>
}
function App () {
// 通过条件渲染模拟组件卸载
const [show, setShow] = useState(true)
return (
<div>
{
show && <Son />}
<button onClick={
() => setShow(false)}>卸载Son组件</button>
</div>
)
}
export default App
自定义Hook实现
概念：自定义Hook是以
use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用
// 封装自定义Hook
// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用
// 解决思路: 自定义hook
import {
useState } from "react"
function useToggle () {
// 可复用的逻辑代码
const [value, setValue] = useState(true)
const toggle = () => setValue(!value)
// 哪些状态和回调函数需要在其他组件中使用 return
return {
value,
toggle
}
}
// 封装自定义hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
// 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
function App () {
const {
value, toggle } = useToggle()
return (
<div>
{
value && <div>this is div</div>}
<button onClick={
toggle}>toggle</button>
</div>
)
}
export default App
React Hooks使用规则
- 只能在组件中或者其他自定义Hook函数中调用
- 只能在组件的顶层调用，不能嵌套在if、for、其它的函数中
案例-优化B站评论案例
使用请求接口的方式获取评论列表并渲染
步骤：
1.使用json-server工具模拟接口服务，通过axios发送接口请求。
2.用useEffect调用接口获取数据
导入json- server工具
npm i json-serve -D
1.准备一个db.json文件
2.写入数据
3.在package.json 的scripts中加入serve字段并指定文件地址和端口地址。
"sever":"json-serve db.json --poet 3004"
4.启动服务
npm run serve
导入axios工具
npm install axios
安装完毕开始落地本小结任务
1.获取接口数据渲染
const [commentList,setCommentlist] = useState([])
useEffect(()=>{
async function getList(){
const res = await axios.get('http://localhost:3004/list')
setCommentlist(res.data)
}
getList()
},[])
使用自定义Hook函数封装数据请求的逻辑
步骤：
1.编写一个use打头的函数。
2.函数内部编写封装的逻辑。
3.retune出去组件用到的状态和方法。
4.组件中调用函数解构并赋值使用。
在主函数外部创建use打头的函数，把getList函数移植上去
function useGetList(){
const [commentList,setCommentlist] = useState([])
useEffect(()=>{
async function getList(){
const res = await axios.get('http://localhost:3004/list')
setCommentlist(res.data)
}
getList()
},[])
return{
commentList,
setCommentlist
}
}
在原本的getList函数的位置调用封装好的函数
const{
commentList,setCommentlist } = useGetList()
把评论中的每一项抽象成一个独立的组件实现渲染
抽象原则：
App作为智能组件负责数据的获取，Item作为UI组件负责数据的渲染。
在App组件上方创建组件Item
将原本负责渲染list的代码移植到Item组件内
function Item({
item}){
return(
<div className="reply-item">
{
/* 头像 */}
<div className="root-reply-avatar">
<div className="bili-avatar">
<img
className="bili-avatar-img"
alt=""
src={
item.user.avatar}
/>
</div>
</div>
<div className="content-wrap">
{
/* 用户名 */}
<div className="user-info">
<div className="user-name">{
item.user.uname}</div>
</div>
{
/* 评论内容 */}
<div className="root-reply">
<span className="reply-content">{
item.content}</span>
<div className="reply-info">
{
/* 评论时间 */}
<span className="reply-time">{
item.ctime}</span>
{
/* 评论数量 */}
<span className="reply-time">点赞数:{
item.like}</span>
{
user.uid === item.user.uid && <span className="delete-btn"}>
删除
</span>}
</div>
</div>
</div>
</div>
)
}
在原来的位置调用Item组件
{
commentList.map(item => (
<Item key={
item.id} item= {
item}/>
))}
在这之后，我们发现react的删除功能的函数报错了
将删除组件移植到封装的Item内
将handleDel函数传到Item中
{
commentList.map(item => (
<Item key={
item.id} item= {
item} onDel = {
handleDel}/>
))}
``
将onDel解构到Item中
```js
function Item({
item,onDel}){
.......//和上面一样 这里就省略啦！
)}
绑定删除的事件
{
user.uid === item.user.uid && <span className="delete-btn" onClick={
()=>onDel(item.rpid)}>
删除
</span>}
总结
前几天因为临近放假了，加上晚上没有休息好，学习上有点小偷懒啦，今天是2023年的最后一天，终于把欠着的进度补上了！希望新的一年的自己不要偷懒！不要偷懒！不要偷懒！祝所有看到这篇博客的兄弟们新年快乐！