React18学习笔记(五) 【总结】常用的React Hooks函数,常用React-Redux Hooks函数,常用React Router DOM Hooks函数和React中的组件通信

一.常用React Hooks函数

1.useState - 状态管理

• 作用:用于在函数组件中添加状态管理,创建状态变量
• 特点:状态变量只能由其状态更新函数来更新其值,状态更新时会触发组件重新渲染
• 示例:

import {
   
   useState} from "react"
const [isVisible,setIsVisible] = useState(false)
const handleClick=()=>{
   
   
	setIsVisible(!isVisible)
}

2.useEffect - 副作用处理

作用:处理组件中的副作用(数据获取,订阅,手动操作DOM等)
参数:副作用函数和依赖项
特点:在组件渲染后执行,通过依赖数组控制执行的时机
使用场景:API请求、事件监听、定时器、操作DOM
示例:

	const [list,setList]=useState()
	useEffect(()=>{
   
   
		const getList=async()=>{
   
   
			const res=await axios.get(url)
			const list=res.data;
			setList(list)
		}
	},[list])

3.useRef - 引用DOM或存储可变值

• 作用:创建可变的引用对象,其.current属性可保存值
• 特点:更新.current属性不会触发组件重新渲染,常用于访问DOM节点
• 常用场景:访问DOM元素、存定时器id，保存前一个状态值
• 示例:获取input框的焦点

  import {
   
    useState,useRef,useEffect } from 'react';
  const inputRef=useRef(null)
  const handleSubmit=()=>{
   
   
    console.log('发布评论')
    // 判断非空
    if(inputValue.trim()==='') return;
    // 发布评论
    const myComment={
   
   
      // rpid:`c${commentList.length+1}`,//替换成uuid
      rpid:uuidV4(),//当成一个可执行方法来使用,生成独一无二的id
      user:{
   
   ...currentUser},
      content:inputValue,
      // ctime:new Date().toLocaleString('zh-CN').split(' ')[0].replace(/\//g, '-'),
      ctime:dayjs(new Date()).format('MM-DD hh:mm'),
      likes:0
    }
    // 提交新评论后:更新状态
    // 1.更新评论列表
    setCommentList([...commentList,myComment])
    // 2.清空input输入框
    setInputValue('')
    // 3.获取DOM元素,文本框重新获得焦点
    inputRef.current.focus();
  }
......
{
   
   /* 评论输入区 */}
<div className="comment-input-area">
  <input 
    type="text"
    placeholder="发个友善的评论吧..."
    value={
   
   inputValue}
    onChange={
   
   e=>setInputValue(e.target.value)}
    className="comment-input"
    ref={
   
   inputRef}
  />
  <button className='submit-btn' onClick={
   
   handleSubmit}>发布</button>
</div>

4.useMemo - 缓存计算结果

• 作用:记忆化计算结果,避免每次渲染都重新计算(类似Vue中的computed和getter)
• 特点:依赖不变时返回缓存值,减少不必要的计算开销
• 注意事项:不要用于有副作用的操作并确保计算函数是纯函数
• 示例一:

  //pages/Month/index.js
  import {
   
    useState, useMemo, useEffect } from "react";
	......
  // 按月分组:消费数据分组处理
  const monthGroup = useMemo(() => {
   
   
    // return出去计算之后的值
    return _.groupBy(billList, (item) => dayjs(item.date).format("YYYY | MM"))
  }, [billList])
  console.log("消费数据(分组后):",monthGroup);

• 示例二:斐波那契数列

  const [count1,setCount1]=useState(0)  
  const [count2,setCount2]=useState(0)  
  function fib(n){
   
   
    console.log('计算函数执行了...')
    if(n<3) return 1
    return fib(n-1)+fib(n-2)
  }
   const result=useMemo(()=>{
   
   
    return fib(count1)
  },[count1])
  console.log('App渲染了...')
  
<div className="useMemoTest">
  <p>斐波那契数列</p>
  {
   
   result}
  <button onClick={
   
   ()=>setCount1(count1+1)}>点击{
   
   count1}</button>
  <button onClick={
   
   ()=>setCount2(count2+1)}>点击{
   
   count2}</button>
</div>
 
 结果:
 	count1发生变化即点击按钮1时,才会打印'计算函数执行了
    点击按钮2时,由于仅变化了count2,只会打印"App渲染了..."

 知识点:
	useState声明的状态变化时会引发组件更新
	useMemo和UseEffect语法很像,前者有返回值

5.memo - 让子组件跳过渲染

React组件的默认渲染机制是:只要父组件重新渲染,子组件就会重新渲染
这样的机制存在性能浪费的问题
使用React.memo可以允许子组件在Props没有改变的情况下跳过渲染
语法:(把子组件包起来)

const MemoComponent=memo(function Son(prop){
   
   })
或:(不另起别名,原先的子组件现作为回调不需要函数名)
const Son=memo((prop)=>{