react笔记（React18）

news2024/9/23 23:33:16

以下笔记可能毫无章法，仅供个人学习记录使用。

关于状态提升：

状态提升适用于兄弟组件之间传递数据，共享状态，其实就是把两个兄弟组件要共同使用的数据存放到共同的父组件中，称状态提升。

关于context跨层级组件通信：

首先会想，为什么会有这样一个东西？什么时候会用到，跨层架组件通信其实也可以理解为祖先组件和孙组件之间的通信，如果不想使用props层层传递，可能就会使用context.

代码实现：


import {createContext,useContext} from 'react'
//1. createContext方法创建一个上下文对象
const MsgContext=createContext()
// 2.在顶层组件 通过provider组件提供数据
// 3.在底层组件 通过useContext钩子函数使用数据(这里的参数不用引号，理解为一个定义的变量名)
function B (){
    return (
        <div>
            this is B
            <C/>
        </div>
    )
}
function C (){
    const msg=useContext(MsgContext)
    console.log(msg)
    return (
        <div>
            this is C:{msg}
        </div>
    )
}
export default function Demo (){
    const msg='this is app message'
    return (
        <div>
            <MsgContext.Provider value={msg}>
                this is Demo
                <B/>
            </MsgContext.Provider>
           
        </div>
    )

}

关于清除副作用：

理解什么是副作用，副作用可以理解为useEffect中编写的由渲染本身引起的对组件外部的操作，被称作副作用操作，比如开启了一个定时器，但是在组件卸载之后定时器并不会关闭，这个就是对组件外部的操作，理解为副作用。

如何使用?:useEffect中会有两个参数，第一个是一个函数，第二个是一个数据对象，清除动作是在第一个参数函数内部return一个箭头函数的方式，这个return的箭头函数作用相当于vue中的组件卸载声明周期函数。

关于封装自定义hook

代码逻辑具有通用性，和组件耦合在一起时，不方便复用，可以通过封装自定义hook

封装思路：

1.声明一个以use打头的函数

2.在函数体内封装可复用的逻辑（只要是可以复用的）

3.在组件中用到的状态或者回调return出去（以对象或者数组）

4.在那个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

import {useState} from 'react'

function useToggle(){
    // 可以复用的代码逻辑
    const [value,setValue]=useState(true)
    const toggle=()=>setValue(!value)
    // return 其他组件中需要使用到的状态和方法
    return {value,toggle}
}

export default function Demo (){
   const {value,toggle}=useToggle()
    return (
        <div>
           {value&&<div>this is div</div>}
           <button onClick={toggle}>toggle</button>
        </div>
    )

}

关于json-server：

作用：模拟接口数据请求的一个库。

封装请求数据的hook:

接口请求通常是通用的代码逻辑，避免页面代码重复，通常应该会封装为一个自定义的hook,然后在组件中直接调用方法请求数据。

react中抽取智能组件和业务组件：

为什么要抽离？这里我理解的抽离后会让代码更加分离一点，展示组件和业务功能组件分离，方便阅读。

通信：既然分离，会涉及到子组件需要调用到父组件中的方法，进行数据修改等操作。红色区域中的onDel是提供给子组件使用的函数方法，handleDel是父组件中处理数据操作的方法回调。这样在子组件中触发onDel方法并传递参数，父组件就可以接收到子组件中触发的item信息（id等），相当与是子组件像父组件通信。

关于redux devtools