React18学习笔记(五) 【总结】常用的React Hooks函数,常用React-Redux 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}`,//替换成uuidrpid:uuidV4(),//当成一个可执行方法来使用,生成独一无二的iduser:{...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.jsimport { 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函数

二.常用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>;
});