React前端开发_Day10

参考课程：

【黑马程序员 React18入门到实战】

[https://www.bilibili.com/video/BV1ZB4y1Z7o8]

@ZZHow(ZZHow1024)

性能优化API

• useReducer

  • 作用：和 useState 的作用类似，用来管理相对复杂的状态数据

  • 基础语法：

    function reducer(state, action) {// 根据不同的 action 返回不同的新状态
    }// 在组件中调用 useReducer，并传入 reducer 函数和状态的初始值
    const [state, dispatch] = useReducer(reducer, 0)
    

  • 步骤：

    1. 定义一个 reducer 函数（根据不同的 action 返回不同的新状态）
    2. 在组件中调用 useReducer，并传入 reducer 函数和状态的初始值
    3. 事件发生时，通过 dispatch 函数分派一个 action 对象（通知 reducer 要返回哪个新状态并渲染 UI）

• useMemo

  • 作用：在组件每次重新渲染的时候缓存计算的结果

  • 基础语法：

    const result = useMemo(() => {// 返回计算的结果
    }, []);
    

  • 说明：使用 useMemo 做缓存之后可以保证只有 count 依赖项发生变化时才会重新计算

• React.memo

  • 作用：允许组件在 Props 没有改变的情况下跳过渲染

  • React 组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染

  • 说明：经过 memo 函数包裹生成的缓存组件只有在 props 发生变化的时候才会重新渲染

  • 基础语法：

    const Input = memo(function Input() {return <input type='text'/>
    })
    

  • props 的比较机制

    • 机制：在使用 memo 缓存组件之后，React 会对每一个 prop 使用 Object.is 比较新值和老值，返回 true，表示没有变化
    • prop 是简单类型
      • 例：Object.is(3, 3) → true 没有变化
    • prop 是引用类型（对象 / 数组）
      • 例：Object.is([], []) → false 有变化，React 只关心引用是否变化

  • 使引用稳定的方法：使用 useMemo 缓存

    const list = useMemo(() => {return [1, 2, 3]
    }, [])
    

• useCallback

  • 作用：在组件多次重新渲染的时候缓存函数

  • 说明：使用 useCallback 包裹函数之后，函数可以保证在 App 重新渲染的时候保持引用稳定

  • 基础语法：

    const changeHandler = useCallback((value) => {return setText(value)
    }, [])
    

ref相关API

• React.forwardRef

  • 使父组件通过 ref 获取到子组件内部的元素

  • 基础语法：

    const Son = forwardRef((props, ref) => {return <input type='text' ref={ref}/>
    })
    

• useImperativeHandle

  • 使父组件通过 ref 调用子组件内部的方法

  • 基础语法：

    // 子组件内部将方法暴露出去
    useImperativeHandle(ref, () => {return {focusHandler}
    })
    

Class API类组件

• 类组件基础结构

  • 类组件就是通过 JS 中的类来组织组件的代码

  • 成员：

    1. 通过类属性 state 定义状态数据
    2. 通过 setState 方法来修改状态数据
    3. 通过 render 来写 UI 模版（JSX 语法一致）

  • 基本语法：

    // Counter 组件
    class Counter extends Component {// 编写逻辑代码// 1. 状态变量state = {count: 0}// 2. 定义事件回调setCount = () => {this.setState({count: this.state.count + 1})}// 3. UI(JSX)render() {return <button onClick={this.setCount}>{this.state.count}</button>}
    }
    

• 类组件的生命周期函数

  • 概念：组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数

    

  • 常见函数：

    1. componentDidMount：组件挂载完毕自动执行——异步数据获取
    2. componentWillUnmount：组件卸载时自动执行——清理副作用

• 类组件的组件通信

  • 概念：类组件和 Hooks 编写的组件在组件通信的思想上完全一致
  • 类型：
    1. 父传子：通过 prop 绑定数据
    2. 子传父：通过 prop 绑定组件中的函数，子组件调用
    3. 兄弟通信：状态提升，通过父组件做桥接

Zustand

• 快速上手

  • 创建 store（状态数据 和 操作方法）—绑定到组件—> component（消费数据和方法）

  • 安装：pnpm add zustand

  • 基本语法：

    import { create } from 'zustand'const useStore = create((set) => ({count: 1,inc: () => set((state) => ({ count: state.count + 1 })),
    }))function Counter() {const { count, inc } = useStore()return (<div><span>{count}</span><button onClick={inc}>one up</button></div>)
    }
    

  • 官网：

    Zustand

• 异步支持

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

  • 基础语法：

    import { create } from 'zustand'const useStore = create((set) => {return {// 状态数据channelList: [],fetchGetList: async () => {const res = await fetch(URL)const jsonRes = await res.json()set({channelList: jsonRes.data.channels})}}
    })
    

• 切片模式

  • 场景：当单个 store 比较大的时候，可以采用切片模式进行模块拆分组合，类似于模块化
  • 步骤：

    1. 拆分子模块，再组合起来

       const createCounterStore = (set) => {return {// 状态数据count: 0,// 修改状态数据的方法inc: () => {set((state) => ({count: state.count + 1}))},}
       }const createChannelStore = (set) => {return {// 状态数据channelList: [],// 修改状态数据的方法fetchGetList: async () => {const res = await fetch(URL)const jsonRes = await res.json()set({channelList: jsonRes.data.channels})}}
       }const useStore = create((...a) => {return {...createCounterStore(...a),...createChannelStore(...a)}
       })
       

    2. 组件使用

       function App() {const {count, inc, channelList, fetchGetList} = useStore()useEffect(() => {fetchGetList()}, [fetchGetList]);return (<><button onClick={inc}>{count}</button><ul>{channelList.map(item => <li key={item.id}>{item.name}</li>)}</ul></>);
       }