【React】Day10

已于 2024-05-08 09:31:42 修改
阅读量651 收藏 11
点赞数 9
分类专栏： React学习 文章标签： react.js 前端 前端框架
于 2024-05-05 10:38:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63681863/article/details/138461393
版权
本文介绍了如何在React中使用useReducer进行状态管理，包括基本用法、更新流程、渲染性能优化（如useMemo和React.memo），以及组件生命周期管理和优化（如forwardRef和useImperativeHandle）。同时讲解了如何通过Zustand库进行状态存储和异步操作，以及如何使用DevTools进行调试。
摘要由CSDN通过智能技术生成

useReducer（用来状态管理

基础使用

在这里插入图片描述

作用: 让 React 管理多个相对关联的状态数据

import { useReducer } from 'react'

// 1. 定义reducer函数，根据不同的action返回不同的新状态
function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
    </>
  )
}

export default App

更新流程

在这里插入图片描述

分派action传参

做法：分派action时如果想要传递参数，需要在action对象中添加一个payload参数，放置状态参数

// 定义reducer

import { useReducer } from 'react'

// 1. 根据不同的action返回不同的新状态
function reducer(state, action) {
  console.log('reducer执行了')
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'UPDATE':
      return state + action.payload
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
      <button onClick={() => dispatch({ type: 'UPDATE', payload: 100 })}>
        update to 100
      </button>
    </>
  )
}

export default App

渲染性能优化

useMemo

使用比较少，比如说消耗非常大的计算才会使用
作用：它在每次重新渲染的时候能够缓存计算的结果

看个场景

下面我们的本来的用意是想基于count的变化计算斐波那契数列之和，但是当我们修改num状态的时候，斐波那契求和函数也会被执行，显然是一种浪费

// useMemo
// 作用：在组件渲染时缓存计算的结果

import { useState } from 'react'

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  const sumByCount = factorialOf(count)

  const [num, setNum] = useState(0)

  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}

export default App

useMemo缓存计算结果

思路: 只有count发生变化时才重新进行计算

import { useMemo, useState } from 'react'

function fib (n) {
  console.log('计算函数执行了')
  if (n < 3) return 1
  return fib(n - 2) + fib(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sum = fib(count)
  // 通过useMemo缓存计算结果，只有count发生变化时才重新计算
  const sum = useMemo(() => {
    return fib(count)
  }, [count])

  const [num, setNum] = useState(0)

  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}

export default App

React.memo

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

组件默认的渲染机制

默认机制：顶层组件发生重新渲染，这个组件树的子级组件都会被重新渲染，就是子组件会和父组件一起无脑渲染

// memo
// 作用：允许组件在props没有改变的情况下跳过重新渲染

import { useState } from 'react'

function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is son</div>
}

function App() {
  const [, forceUpdate] = useState()
  console.log('父组件重新渲染了')
  return (
    <>
      <Son />
      <button onClick={() => forceUpdate(Math.random())}>update</button>
    </>
  )
}

export default App

使用React.memo优化

机制：只有props发生变化时才重新渲染
下面的子组件通过 memo 进行包裹之后，返回一个新的组件MemoSon, 只有传给MemoSon的props参数发生变化时才会重新渲染

import React, { useState } from 'react'
// 或者从react引用，就直接memo( 子组件 )
const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
})

function App() {
  const [, forceUpdate] = useState()
  console.log('父组件重新渲染了')
  return (
    <>
      <MemoSon />
      <button onClick={() => forceUpdate(Math.random())}>update</button>
    </>
  )
}

export default App

props变化重新渲染

import React, { useState } from 'react'

const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
})

function App() {
  console.log('父组件重新渲染了')

  const [count, setCount] = useState(0)
  return (
    <>
      <MemoSon count={count} />
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </>
  )
}

export default App

props的比较机制

对于props的比较，进行的是‘浅比较’，底层使用 Object.is 进行比较，针对于对象数据类型，只会对比俩次的引用是否相等，如果不相等就会重新渲染，React并不关心对象中的具体属性

在这里插入图片描述


import React, { useState } from 'react'

const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
})

function App() {
  // const [count, setCount] = useState(0)
  const [list, setList] = useState([1, 2, 3])
  return (
    <>
      <MemoSon list={list} />
      <button onClick={() => setList([1, 2, 3])}>
        {JSON.stringify(list)}
      </button>
    </>
  )
}

export default App

说明：虽然俩次的list状态都是 [1,2,3] , 但是因为组件App俩次渲染生成了不同的对象引用list，所以传给MemoSon组件的props视为不同，子组件就会发生重新渲染

保证引用稳定

使用useMemo组件渲染过程中缓存一个值。
空数组表示：回调函数只在组件渲染完毕之后，执行一次

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

自定义比较函数

如果上一小节的例子，我们不想通过引用来比较，而是完全比较数组的成员是否完全一致，则可以通过自定义比较函数来实现

import React, { useState } from 'react'

// 自定义比较函数
function arePropsEqual(oldProps, newProps) {
  console.log(oldProps, newProps)
  return (
    oldProps.list.length === newProps.list.length &&
    oldProps.list.every((oldItem, index) => {
      const newItem = newProps.list[index]
      console.log(newItem, oldItem)
      return oldItem === newItem
    })
  )
}

const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
}, arePropsEqual)

function App() {
  console.log('父组件重新渲染了')
  const [list, setList] = useState([1, 2, 3])
  return (
    <>
      <MemoSon list={list} />
      <button onClick={() => setList([1, 2, 3])}>
        内容一样{JSON.stringify(list)}
      </button>
      <button onClick={() => setList([4, 5, 6])}>
        内容不一样{JSON.stringify(list)}
      </button>
    </>
  )
}

export default App

useCallback

看个场景

上一小节我们说到，当给子组件传递一个引用类型prop的时候，即使我们使用了memo 函数依旧无法阻止子组件的渲染，其实传递prop的时候，往往传递一个回调函数更为常见，比如实现子传父，此时如果想要避免子组件渲染，可以使用 useCallback缓存回调函数

// useCallBack

import { memo, useState } from 'react'

const MemoSon = memo(function Son() {
  console.log('Son组件渲染了')
  return <div>this is son</div>
})

function App() {
  const [, forceUpate] = useState()
  console.log('父组件重新渲染了')
  const onGetSonMessage = (message) => {
    console.log(message)
  }

  return (
    <div>
      <MemoSon onGetSonMessage={onGetSonMessage} />
      <button onClick={() => forceUpate(Math.random())}>update</button>
    </div>
  )
}

export default App

useCallback缓存函数

useCallback缓存之后的函数可以在组件渲染时保持引用稳定，也就是返回同一个引用

// useCallBack

import { memo, useCallback, useState } from 'react'

const MemoSon = memo(function Son() {
  console.log('Son组件渲染了')
  return <div>this is son</div>
})

function App() {
  const [, forceUpate] = useState()
  console.log('父组件重新渲染了')
  const onGetSonMessage = useCallback((message) => {
    console.log(message)
  }, [])

  return (
    <div>
      <MemoSon onGetSonMessage={onGetSonMessage} />
      <button onClick={() => forceUpate(Math.random())}>update</button>
    </div>
  )
}

export default App

forwardRef

作用：允许组件使用ref将一个DOM节点暴露给父组件

如果不使用forwardRef是不会在父组件获取到子组件的：

import { forwardRef, useRef } from "react";

const Son = () => {
  return <input></input>;
};
function App() {
  const ref = useRef(null);

  const focusHandle = () => {
    console.log(ref);
  
  };

  return (
    <div>
      <Son ref={ref} />
      <button onClick={focusHandle}>focus</button>
    </div>
  );
}

export default App;

在这里插入图片描述

import { forwardRef, useRef } from 'react'
// 其实这里面的回调函数就是子组件的render函数
const MyInput = forwardRef(function Input(props, ref) {
  return <input {...props} type="text" ref={ref} />
}, [])

function App() {
  const ref = useRef(null)

  const focusHandle = () => {
    console.log(ref.current.focus())
  }

  return (
    <div>
      <MyInput ref={ref} />
      <button onClick={focusHandle}>focus</button>
    </div>
  )
}

export default App

在这里插入图片描述

useImperativeHandle

作用：如果我们并不想暴露子组件中的DOM而是想暴露子组件内部的方法
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

import { forwardRef, useImperativeHandle, useRef } from 'react'

const MyInput = forwardRef(function Input(props, ref) {
  // 实现内部的聚焦逻辑
  const inputRef = useRef(null)
  const focus = () => inputRef.current.focus()

  // 暴露子组件内部的聚焦方法
  useImperativeHandle(ref, () => {
    return {
      focus,
    }
  })

  return <input {...props} ref={inputRef} type="text" />
})

function App() {
  const ref = useRef(null)

  const focusHandle = () => ref.current.focus()

  return (
    <div>
      <MyInput ref={ref} />
      <button onClick={focusHandle}>focus</button>
    </div>
  )
}

export default App

Class API（老用法，不再推荐

顾名思义，Class API就是使用ES6支持的原生Class API来编写React组件

基础体验

通过一个简单的 Counter 自增组件看一下组件的基础编写结构

// class API
import { Component } from 'react'

class Counter extends Component {
  // 1. 通过类属性state定义状态数据
  state = {
    count: 0,
  }

  // 2. 定义事件回调修改状态数据
  clickHandler = () => {
    // 修改状态变量 触发UI组件渲染
    this.setState({
      count: this.state.count + 1,
    })
  }

  // 通过render来写UI模版（JSX语法一致）
  render() {
    return <button onClick={this.clickHandler}>+{this.state.count}</button>
  }
}

function App() {
  return (
    <div>
      <Counter />
    </div>
  )
}

export default App

组件生命周期

在这里插入图片描述
组件卸载的时候自动执行，副作用清理的工作，例如清除定时器，清除事件绑定

组件通信

父传子

在这里插入图片描述

// class API
import { Component } from 'react'

class Son extends Component {
  render() {
    const { count } = this.props
    return <div>this is Son, {count}</div>
  }
}

class App extends Component {
  // 状态变量
  state = {
    count: 0,
  }

  setCount = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }

  // UI模版
  render() {
    return (
      <>
        <Son count={this.state.count} />
        <button onClick={this.setCount}>+</button>
      </>
    )
  }
}

export default App

子传父

在子组件标签身上绑定父组件中的函数，子组件中调用这个函数传递参数

// class API
import { Component } from 'react'

class Son extends Component {
  render() {
    const { msg, onGetSonMsg } = this.props
    return (
      <>
        <div>this is Son, {msg}</div>
        <button onClick={() => onGetSonMsg('this is son msg')}>
          changeMsg
        </button>
      </>
    )
  }
}

class App extends Component {
  // 状态变量
  state = {
    msg: 'this is initail app msg',
  }

  onGetSonMsg = (msg) => {
    this.setState({ msg })
  }

  // UI模版
  render() {
    return (
      <>
        <Son msg={this.state.msg} onGetSonMsg={this.onGetSonMsg} />
      </>
    )
  }
}

export default App

更多阅读
Component – React 中文文档

zustand（ 状态管理

在这里插入图片描述

快速上手

Zustand Documentation

store/index.js - 创建store

  1. create的参数是一个函数，这个函数的返回值是一个对象
  2. set是用来修改数据的专门方法，必须用它来修改数据
    • 语法1：需要用到老数据，参数是函数
    • 语法2：不用老数据，参数值是一个对象
import { create } from 'zustand'

const useStore = create((set) => {
  return {
    count: 0,
    inc: () => {
      set(state => ({ count: state.count + 1 }))
     // set({count:100})
    }
  }
})

export default useStore

app.js - 绑定组件

import useStore from './store/useCounterStore.js'

function App() {
  const { count, inc } = useStore()
  return <button onClick={inc}>{count}</button>
}

export default App

异步支持

对于异步操作的支持不需要特殊的操作，直接在函数中编写异步逻辑，最后把接口的数据放到set函数中返回即可

store/index.js - 创建store

import { create } from 'zustand'

const URL = 'http://geek.itheima.net/v1_0/channels'

const useStore = create((set) => {
  return {
    count: 0,
    ins: () => {
      return set(state => ({ count: state.count + 1 }))
    },
    channelList: [],
    fetchChannelList: async () => {
      const res = await fetch(URL)
      const jsonData = await res.json()
      set({channelList: jsonData.data.channels})
    }
  }
})

export default useStore

app.js - 绑定组件

import { useEffect } from 'react'
import useChannelStore from './store/channelStore'

function App() {
  const { channelList, fetchChannelList } = useChannelStore()
 
  useEffect(() => {
    fetchChannelList()
  }, [fetchChannelList])

  return (
    <ul>
      {channelList.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}

export default App

切片模式

场景：当我们单个store比较大的时候，可以采用一种切片模式进行模块拆分再组合

拆分并组合切片


import { create } from 'zustand'

// 创建counter相关切片
const createCounterStore = (set) => {
  return {
    count: 0,
    setCount: () => {
      set(state => ({ count: state.count + 1 }))
    }
  }
}

// 创建channel相关切片
const createChannelStore = (set) => {
  return {
    channelList: [],
    fetchGetList: async () => {
      const res = await fetch(URL)
      const jsonData = await res.json()
      set({ channelList: jsonData.data.channels })
    }
  }
}

// 组合切片
// a是传过来的参数
const useStore = create((...a) => ({
// 展开运算符
  ...createCounterStore(...a),
  ...createChannelStore(...a)
}))

组件使用

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

export default App

对接DevTools

简单的调试我们可以安装一个 名称为 simple-zustand-devtools 的调试工具

安装调试包

npm i simple-zustand-devtools -D

配置调试工具

import create from 'zustand'

// 导入核心方法
import { mountStoreDevtool } from 'simple-zustand-devtools'

// 省略部分代码...


// 开发环境开启调试
if (process.env.NODE_ENV === 'development') {
  mountStoreDevtool('channelStore', useChannelStore)
}


export default useChannelStore

打开 React调试工具

在这里插入图片描述

珊珊而川
关注
专栏目录
React渲染性能的优化
2302_77101581的博客
01-01 659
如果上一小节的例子，我们不想通过引用来比较，而是完全比较数组的成员是否完全一致，则可以通过自定义比较函数来实现​// 自定义比较函数return (})​console.log('子组件被重新渲染了')​console.log('父组件重新渲染了')return (内容一样{JSON.stringify(list)}内容不一样{JSON.stringify(list)}​。
react 渲染优化
weixin_34148508的博客
04-05 166
2019独角兽企业重金招聘Python工程师标准>>> ...
React之组件渲染性能优化
最新发布
jydchudq的博客
10-16 1006
下面对React.memo和useMemo特性React.memouseMemo主要功能缓存组件，防止不必要的渲染缓存回调函数缓存计算结果使用场景当传入的 props 没有变化时，避免组件重新渲染传递函数到子组件时，避免重新渲染时重新创建该函数避免在每次渲染时，进行不必要的昂贵计算依赖项根据 props 变化根据依赖数组变化根据依赖数组变化返回值类型返回新的组件返回记忆化的函数返回记忆化的值。
React 大数据量列表渲染优化：前端实战经验让性能飙升50%，页面速度提升95%
SailingCoder的博客
06-17 1570
思路：如何通过虚拟化技术和 Intersection Observer，实现前端渲染性能飙升 50% 的突破，页面渲染速度提升 95% ！
React组件渲染优化
cry
09-13 299
CartList.js import React, { Component, PureComponent } from 'react'; class CartList extends Component { constructor(props) { super(props); this.state = { goods: [] } } componentDidMount() { setInter
react-day-picker：React的轻量级日期选择器组件
02-03
npm install react-day-picker import DayPicker from " react-day-picker " ; import " react-day-picker/lib/style.css " ; export default function Hello () { return ; } 文献资料 在卡住？ v8即将到来！ 下...
react-reactdaypicker灵活的React日期选择器
08-15
10. **与其他React库的兼容性**：react-day-picker可以很好地与诸如Redux、Formik等其他React库集成，方便构建复杂应用。 在实际使用中，开发者可以从GitHub上的`react-day-picker-master`压缩包获取源代码，包含...
saturday:React Day演讲的示例应用
03-25
此目录中的文件被视为而不是React页面。 了解更多 要了解有关Next.js的更多信息，请查看以下资源： -了解Next.js功能和API。 交互式Next.js教程。 您可以查看-欢迎您提供反馈和意见！ 在Vercel上部署 部署Next....
react-month-day:React组件以显示月份和日期
05-06
`react-month-day`就是这样一个组件，它专门设计用于显示当前的月份和日期，为开发者提供了便捷的方式来展示日期信息，尤其适用于日历应用或者需要时间展示的界面。 首先，让我们详细了解一下如何安装和使用`react-...
react-day-select:React日选择
04-18
npm i react-day-select --save 或通过纱线： yarn add react-day-select 用法 这是基本用法示例： import React, { useState } from ' react ' ; import DatePicker from ' react-day-select ' ; function ...
React 的内置 Hook
fukun125的专栏
12-13 867
React Hooks 是 React 16.8 版本引入的一项功能，它们使函数组件能够拥有类似于类组件的状态（state）和生命周期方法的能力，从而更容易实现和管理状态逻辑。通过使用 Hooks，你可以在无需编写类组件的情况下，实现更简洁、可读性更高的代码。这些是 React Hooks 的一些基础用法。使用这些 Hooks 可以使你更方便地处理组件的状态和副作用，从而提高代码的可维护性和可读性。
React渲染-几个性能优化点
唐唐唐行的博客
03-27 480
在过去的一段时间，我一直围绕项目中体验不好或者无效渲染较为严重的组件做，多少积累了一些经验所以想着整理成一片文章，下图就是优化后的一个组件，可以对比优化前一次切换与优化后多次切换的渲染颜色深度与按钮的切换速度：关于减少组件无效渲染，与其说是提几点建议，不如说是在优化过程中所记录的一些不规范的写法，能写出更好的代码总是更棒的，也希望这几点建议能对大家能有些许帮助。当然，以下建议不管class组件还是hooks中其实都有参考意义，那么本文开始。
【React】列表应用
qq_45677671的博客
04-22 441
文章目录渲染列表组件基础列表组件用 key 提取组件 渲染列表组件 我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems： const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); 我们把整个 listItems
React渲染和优化
liuj4 | 自娱自乐
11-05 551
单纯子组件渲染不会引起父组件渲染！ 当父组件重渲染的时候，会默认递归的重渲染所有子组件
React 内置 Hooks：强大的工具助力函数式组件开发
ljx11606的博客
08-29 857
React 的内置 Hooks 为函数式组件开发带来了巨大的便利和灵活性。通过合理地使用这些 Hooks，我们可以构建出高效、可维护的 React 应用。
React渲染机制及相关优化方案
weixin_53068161的博客
07-09 3568
文章主要简单记录react中的渲染机制以及相关的优化方案，内容包括如下： （1）react渲染步骤、concurrent机制以及产生作用的机会；（2）简单模拟实现 concurrent mode；（3）基于作业调度优先级的思路进行项目优化的两个hooks；（4）案例演示
React（六）：重渲染优化
MR洁儿的博客
12-19 1863
由上一篇文章《React（五）：React在什么情况下会render》可知，除初始化组件渲染外，组件会在以下两种情况下发生重渲染： 1、当调用setState()函数时，组件会发生重渲染，即使组件的state未发生改变； 2、当父组件发生重渲染时，其全部子组件都会重渲染。 虽然React的重渲染机制是严谨的，但是也是非常耗时的，我们有两种方式来阻止组件不必要的重渲染。 1、shouldCo...
React渲染优化之immutableJS(一)
我是渣渣
10-07 676
我们都知道react是数据变更以后就会刷新页面，但是如果我们只是变了某一个数据，然后整个页面都刷新的话，那会很消耗浏览器的性能，我门能做的，就是减少不必要的刷新，具体怎么做，我们一步步的来 项目搭建 这里使用create-react-app stduy_immutable初始化项目 项目初始化完成之后，进入src目录，删除所有文件，自己新建一个index.js 先来一个简单的计数器demo，...
React内置Hook介绍以及用法（案例）
我们好像在哪见过 私
07-20 1060
React Hooks是React 16.8版本中引入的特性，它是一组函数，可以让你在函数组件中使用React的特性，如状态管理、副作用处理等。之前的React中，状态和逻辑的复用通常需要使用类组件和高阶组件，而Hooks则允许我们在函数组件中完成这些任务，使得代码更加简洁和易于理解。
react expandable
06-08
可以使用React编写可展开的组件，例如一个可展开的列表或者可展开的面板。通常这些组件需要一个状态来控制它们是否展开，你可以使用React的state或者hooks来管理这个状态。在组件的render函数中，可以根据状态来渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值