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

文章目录

• • • 一.常用React Hooks函数
    • • 1.useState - 状态管理
      • 2.useEffect - 副作用处理
      • 3.useRef - 引用DOM或存储可变值
      • 4.useMemo - 记忆化计算结果
      • 5.useContext - 访问上下文
      • 6.useCallback - 记忆化函数
      • 7.自定义React Hooks函数
    • 二.常用React-Redux Hooks函数
    • • 1.useSelector - 访问Redux Store的状态
      • 2.useDispatch - 分发Action
      • 3.useStore - 访问Store示例
    • 三.React中的组件通信
    • • 1.父传子
      • 2.子传父
      • 3.跨层级通信
      • 4.使用ref

一.常用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"><inputtype="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);

5.useContext - 访问上下文

• 作用:访问React上下文中的值
• 特点:避免props层层传递
• 注意事项:组件会在上下文值变化时重新渲染,当使用多个上下文时嵌套顺序会影响值获取
• 常用场景:主体切换、用户认证、多语言支持
• 示例:

// 1. 创建上下文
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);}function Toolbar() {return <ThemedButton />;}function ThemedButton() {const theme = useContext(ThemeContext);return (<button style={{background: theme === 'dark' ? '#333' : '#eee',color: theme === 'dark' ? '#fff' : '#000'}}>主题按钮</button>);}

6.useCallback - 记忆化函数

• 作用:返回记忆化的回调函数,避免每次渲染都创建新函数
• 特点:依赖不变时防止相同的函数引用,优化子组件避免不必要的重新渲染
• 注意事项:仅当函数的创建成本高或传递给子组件时使用
• 常用场景:优化子组件props、事件处理函数
• 示例:

function Parent() {
const [count, setCount] = useState(0);
// 记忆化回调函数
const increment = useCallback(() => {
setCount(c => c + 1);
}, []);
return (
<div><Child onIncrement={increment} /><p>计数: {count}</p></div>);}// 使用React.memo优化子组件const Child = React.memo(({ onIncrement }) => {console.log('子组件渲染');return <button onClick={onIncrement}>增加</button>;});

7.自定义React Hooks函数

const useToggle=()=>{
const [show,setShow]=useState(true)
const isToggle=()=>setShow(!show)
return{
show,
isToggle
}
}
const [show,isToggle]=useToggle();
<button onClick={isToggle}>{show ? "点击隐藏" : "点击显示"}</button>

二.常用React-Redux Hooks函数

1.useSelector - 访问Redux Store的状态

• 作用：从Redux store中提取和监听状态
• 参数：一个选择器函数，接收整个state并返回需要的状态片段
• 特点：当选择的值发生变化时，组件会重新渲染
• 注意事项：选择器应简单高效，避免复杂计算,避免在 useSelector 中返回新的引用类型对象
• 示例：引入后台消费数据

/*省流:只看使用部分*/
//使用----组件内(pages/Month/index.js):
import { useSelector } from "react-redux";
const Month = () => {
// 引入后台消费数据
const billList = useSelector((state) => state.bill.billList)
console.log("消费数据(原始):",billList)
}
//定义----store内(store/modules/billStore.js)
const billStore = createSlice({
name: 'bill',
initialState: {
// 账单列表
billList: [],
},
reducers: {
// 设置账单列表
setBillList(state, action) {
state.billList = action.payload
}
}
})
const { setBillList } = billStore.actions
//导出/注册----入口文件内(store/index.js)
// 组合子模块,导出store实例
import billReducer from './modules/billStore.js'
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({
reducer: {
bill: billReducer// 这里的key要和子模块的name一致,即:name: 'bill'
}
})
export default store

2.useDispatch - 分发Action

• 功能:获取Redux store的dispatch函数引用
• 特点:返回的dispatch引用时稳定的,不会随着渲染改变
• 最佳实践:把dispatch逻辑封装在回调函数中
• 示例:

//page/Layout/index.js----在useEffect中dispatch存于store中的Action异步方法
import { useDispatch } from 'react-redux'
import { useEffect } from "react";
const Layout = () => {
const dispatch = useDispatch()
useEffect(() => {// 组件挂载完成之后,执行异步请求消费数据列表(账单)
dispatch(getBillList())
}, [dispatch])
.....
}
//store/modules/billStore.js----store中的异步方法:
// 异步获取账单列表
const getBillList = () => {
return async (dispatch) => {
const res = await axios.get('http://localhost:8888/list')
dispatch(setBillList(res.data))
}
}
export { getBillList }

3.useStore - 访问Store示例

• 功能:获取整个Redux store实例引用(不常用)
• 使用场景:特定情况下须知直接访问整个store对象时,如手动订阅
• 注意事项:大多数情况下应优先使用useSelector而非直接访问store
• 示例:

import { useStore } from 'react-redux';
function DebugComponent() {
const store = useStore();
// 获取当前状态快照
const currentState = store.getState();
// 监听状态变化
useEffect(() => {
const unsubscribe = store.subscribe(() => {
console.log('状态更新:', store.getState());
});
return unsubscribe;
}, [store]);
return <div>调试信息</div>;}

三.React中的组件通信

1.父传子

父组件设置自定义属性,子组件函数中通过形参接收

// 父组件
function Parent() {
const [message, setMessage] = useState('Hello from Parent');
return (
<Child greeting={message} />);}// 子组件function Child({ greeting }) {return <div>{greeting}</div>;}

2.子传父

子组件设置事件的回调函数,父组件通过自定义事件名接收

// 父组件
function Parent() {
const handleChildEvent = (data) => {
console.log('子组件传递的数据:', data);
};
return <Child onEvent={handleChildEvent} />;}// 子组件function Child({ onEvent }) {const sendData = () => {onEvent({ value: '来自子组件的数据' });};return <button onClick={sendData}>发送数据</button>;}

3.跨层级通信

使用Context API创建上下文

// 创建上下文
const FamilyContext = React.createContext();
// 父组件
function Parent() {
return (
<FamilyContext.Provider value={{ surname: 'Smith' }}><Child /></FamilyContext.Provider>);}// 子组件function Child() {const family = useContext(FamilyContext);return <div>姓氏: {family.surname}</div>;}

4.使用ref

// 父组件
function Parent() {
const childRef = useRef();
const callChildMethod = () => {
childRef.current.childMethod();
};
return (
<><Child ref={childRef} /><button onClick={callChildMethod}>调用子组件方法</button></>);}// 子组件（使用 forwardRef）const Child = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({childMethod: () => console.log('子组件方法被调用')}));return <div>子组件</div>;});