useState
useState用于在函数组件中声明和管理状态
它接受初始状态,并返回一个状态变量和一个更新状态的函数
通过调用更新状态的函数,可以改变状态的值并触发组件的重新渲染
import { useState } from "react"
function App() {
const [obj, setObj] = useState({
a: 1,
b: 2
})
const [arr, setArr] = useState([])
const updateObjValue = () => {
// 更新引用值的状态,必须传递一个新的引用
setObj(prev => {
return {
...obj,
b: 3
}
})
setArr(prev => [...arr, 1])
}
return (
<div onClick={updateObjValue}>
a: {obj.a}
b: {obj.b}
数组:{arr}
</div>
)
}
export default App;
useEffect
React的useEffect钩子可以让开发者在函数组件中管理副作用。
副作用操作是指那些与组件渲染无关的操作,例如访问网络、获取浏览器窗口大小、访问本地存储等。这些操作一般会产生一些副作用,例如更新组件状态、改变浏览器地址等。
使用useEffect可以在组件渲染后执行副作用操作,并且可以根据需要设置条件,只在满足条件时执行副作用操作,从而避免不必要的计算和网络请求。
useEffect接收两个参数:第一个参数是一个回调函数,该函数会在组件渲染之后执行,用于执行副作用操作。
如果需要在组件卸载时执行一些清理操作,可以在该函数中返回一个清理函数,React会在组件卸载时调用该函数(如清除定时器等)。
第二个参数是一个可选数组,用于指定当依赖项发生变化时是否需要重新执行effect函数。
如果第二个参数为空数组,则表示effect只会在组件挂载和卸载时执行一次;如果第二个参数不为空数组,每当指定的依赖项发生变化时,effect函数都会重新执行。
// 监听count的变化,重新渲染
import React, { useState, useEffect } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
请求网络
import { useState, useEffect } from 'react';
function Example() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
{data && <h1>{data.title}</h1>}
</div>
);
}
通过useEffect来获取数据
import {useEffect, useState} from "react";
const UseEffectDemo = () => {
const [list, setList] = useState([])
const [id, setId] = useState('5433d5e4e737cbe96dcef312')
const [num, setNum] = useState(0)
const [info, setInfo] = useState([])
useEffect(()=>{
const requestList = async () => {
try {
const response = await fetch('https://cnodejs.org/api/v1/topics')
const res = await response.json()
console.log(res['data'])
setList(res['data'])
} catch (err) {
if (err) throw Error
}
}
requestList().then((rs)=>{
console.log('requestList')
})
},[])
useEffect(()=>{
const requestInfo = async () => {
try {
const response = await fetch('https://cnodejs.org/api/v1/topic/' + id)
const res = await response.json()
setInfo(res['data'])
} catch (err) {
if (err) throw Error
}
}
requestInfo().then((rs)=>{
console.log('requestInfo')
})
},[id])
return (
<>
<h2 id='title'>UseEffect Demo</h2>
<h4>{id}</h4>
<div style={{display:'flex'}}>
<ul>
{
list.map((item, index)=>{
return (
<li
key={item.id}
style={{background:index === num ? 'skyblue':'white', cursor:"pointer"}}
onClick={()=>{
setId(item.id)
setNum(index)
}}
>{item.id}</li>
)
})
}
</ul>
<div dangerouslySetInnerHTML={{__html: info.content}}>
</div>
</div>
</>
)
}
export default UseEffectDemo
useEffect是异步执行的,useLayoutEffect是同步执行的。
useLayoutEffect是当浏览器把内容渲染到页面之前执行,而useEffect是当浏览器把内容渲染到页面之后执行。尽可能使用标准的useEffect以避免阻塞页面更新。
useEffect的运行规则:组件首次渲染工作完成并将真实dom生成到页面以后,将对应的回调函数推入异步队列等待执行
useLayoutEffect的运行规则:组件首次渲染工作完成并将真实dom生成到页面以后,将对应的回调函数推入同步队列等待执行
正常情况全部使用useEffect,只有逼不得已的情况才考虑是否使用useLayoutEffect
import { useState, useEffect } from "react";
export default function TopicList() {
const [topicList, setTopicList] = useState([])
useEffect(() => {
const requestList = async () => {
try {
const response = await fetch('https://cnodejs.org/api/v1/topics')
const res = await response.json()
console.log(res['data'])
setTopicList(res['data'])
} catch (err) {
if (err) throw Error
}
}
requestList().then((rs)=>{
console.log('requestList')
})
const topicListDom = document.getElementsByClassName("topic-list-wrapper")[0]
console.log('topicListDom', topicListDom)
}, [])
return (
<div className="topic-list-wrapper">
{
topicList.map(topic => (
<div key={topic.id}>{topic.title}</div>
)
)
}
</div>
)
}
清除定时器
import { useState, useEffect } from "react";
export default function Tick() {
const [tickTime, setTickTime] = useState(100)
useEffect(() => {
let timer = setInterval(() => {
console.log("tickTime working")
setTickTime(prev => prev - 1)
}, 1000);
return () => {
clearInterval(timer)
timer = null
}
}, [])
return (
<div>倒计时: {tickTime}</div>
)
}
useReducer
useReducer是另一种让函数组件保存状态的方式
它接受一个 reducer
函数和一个初始状态,并返回当前状态和 dispatch
函数
import { useReducer } from "react";
export default function ReducerDemo() {
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return state + 1
case 'decrement':
return state + 1
}
return state;
}
const [count, dispatch] = useReducer(reducer, 0)
return (
<div>
<span>{count}</span>
<button onClick={() => dispatch({ type: 'increment' })}>plus</button>
</div>
)
}
useCallBack
每次组件的重新渲染都意味着内部所有的引用值都会被重新构建
useCallBack用来长期稳定的维护某一个函数的引用,它会将函数创建后的引用保存,当函数组件下一次重新渲染时,它会直接返回之前保存的引用,而不是重新创建引用
useCallBack只在创建函数引用的时候使用
import {useState, memo, useCallback} from "react";
const Child = memo(({value,change}) => {
console.log('----re-render----')
return (
<input type="text" value={value} onChange={change}/>
)
})
const UseCallback = () => {
const [v1, setV1] = useState('')
const [v2, setV2] = useState('')
const onChange1 = useCallback((e)=>{
setV1(e.target.value)
}, [])
const onChange2 = useCallback((e)=>{
setV2(e.target.value)
}, [])
return (
<>
<h2>UseCallback</h2>
<Child value={v1} change={onChange1}/>
<Child value={v2} change={onChange2}/>
</>
)
}
export default UseCallback
useMemo
useMemo类似于计算属性
useCallBack就是useMemo实现的,用来做缓存的
useCallBack第一个参数也是一个函数,并不会在声明时被React直接执行;该函数会在组件渲染过程中被 useMemo 钩子调用,将计算结果进行缓存
第二个参数是依赖项,当依赖项变化时,React会重新执行对应的第一个参数,然后拿到最新的返回值,再次进行缓存
业内都是使用useCallBack去缓存函数
memo方法:
性能优化,如果本组件中的数据没有发生变化,阻止组件更新
import { memo } from "react";
function MemoDemo() {
console.log('memo rendering...')
return (
<div>memo data</div>
)
}
export default memo(MemoDemo)
自定义hooks
使用自定义 hook 时,需要遵循以下规则:
- 自定义 hook 必须是一个函数,名称必须以“use”为前缀。
- 自定义 hook 可以调用其他钩子或普通函数。
- 自定义 hook 应该使用 useState、useEffect 等 React 钩子创建状态和处理副作用。
- 可以将自定义钩子与 useContext 和 useReducer 配合使用来实现更复杂的行为。
下面是一个示例自定义 hook,用于检查用户是否拥有特定的权限:
import { useState, useEffect } from 'react';
function useUserPermissions(permission) {
const [hasPermission, setHasPermission] = useState(false);
useEffect(() => {
// 模拟 Ajax 请求,获取用户权限
const userPermissions = ['admin', 'editor'];
if (userPermissions.includes(permission)) {
setHasPermission(true);
} else {
setHasPermission(false);
}
}, [permission]);
return hasPermission;
}
在其他组件中使用 hook 检查用户是否拥有访问特定页面或功能的权限
import React from 'react';
import useUserPermissions from './useUserPermissions';
function Dashboard() {
const hasAccess = useUserPermissions('admin');
return (
<div>
{hasAccess ? (
<h1>Welcome to the Admin Dashboard!</h1>
) : (
<h1>Sorry, you do not have access to this page.</h1>
)}
</div>
);
}
显示loading效果
新建文件useRequestLoadingDispatcher.js
import { useState } from "react";
export default function useRequestLoadingDispatcher() {
const [loading, setLoading] = useState(false)
const executeRequest =async (promiseFn) => {
setLoading(true)
console.log('loading data........................')
await promiseFn()
setLoading(false)
console.log('init finish')
}
return {loading, executeRequest}
}
使用useRequestLoadingDispatcher
import { useState, useEffect } from "react";
import TopicItem from "../TopicItem";
import useRequestLoadingDispatcher from "../hooks/useRequestLoadingDispatcher";
export default function TopicList() {
const [topicList, setTopicList] = useState([])
const {loading, executeRequest} = useRequestLoadingDispatcher()
const fetchFromServer = async () => {
// 延时模拟加载中
const delay = async (duration = 2000) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, duration)
})
}
executeRequest(async () => {
try {
const response = await fetch('https://cnodejs.org/api/v1/topics')
const res = await response.json()
console.log(res['data'])
await delay(2000)
setTopicList(res['data'])
} catch (err) {
if (err) throw Error
}
})
}
useEffect(() => {
fetchFromServer()
}, [])
return (
<div className="topic-list-wrapper">
{ loading ? <div>数据加载中</div> : (
topicList.map(topic => (
<TopicItem {...topic}></TopicItem>
)
)
)
}
</div>
)
}
强制刷新useForceUpdate
import { useState } from "react";
export default function useForceUpdate() {
const [_, setForceObj] = useState({})
const forceUpdate = () => {
setForceObj({})
}
return forceUpdate;
}
使用强制刷新
import useForceUpdate from "../hooks/useForceUpdate"
export default function ForceUpdateTest() {
console.log('do force update')
const forceUpdate = useForceUpdate()
return (
<button onClick={forceUpdate}>force update</button>
)
}
useRef
构建一个状态出来,但是这个状态是直接脱离React控制的,也不会造成页面的重新渲染,同时状态还不会因为组件的重新渲染而被初始化
import { useState, useCallback, useRef } from "react";
export default function Ticker() {
const [timeCount, setTimeCount] = useState(60)
const timerIdRef = useRef(null)
// useRef会返回一个对象,里面有一个current属性
// ref是可读可写的
console.log("timerIdRef", timerIdRef)
const startTick = useCallback(() => {
timerIdRef.current = setInterval(()=>{
setTimeCount(prev => prev - 1)
}, 1000)
})
const stopTick = useCallback(() => {
if (timerIdRef.current) clearInterval(timerIdRef.current)
})
return (
<>
<button onClick={startTick}>start</button>
<button onClick={stopTick}>stop</button>
<span>{timeCount}</span>
</>
)
}
使用useRef获取DOM元素
import { useCallback, useEffect, useRef } from "react"
export default function TestInput() {
const inputElementRef = useRef(null)
useEffect(() => {
inputElementRef.current = document.getElementsByClassName('input-example')[0]
}, [])
const handleClick = useCallback(() => {
inputElementRef.current.focus()
})
return (
<div>
<input className="input-example"></input>
<button onClick={handleClick}>click me</button>
</div>
)
}
useRef可以直接作用在dom上,它使用useEffect去获取真实dom并且赋值
import { useCallback, useRef } from "react"
export default function TestInput() {
const inputElementRef = useRef(null)
const handleClick = useCallback(() => {
inputElementRef.current.focus()
})
return (
<div>
<input ref={inputElementRef} className="input-example"></input>
<button onClick={handleClick}>click me</button>
</div>
)
}
fowardRef
fowardRef是一个高阶组件
高阶组件:接收一个组件作为参数,返回一个新的组件
fowardRef给函数组件扩展了一个ref属性
TestInput.jsx
import { forwardRef } from "react"
// 给组件挂载ref属性,必须使用forwardRef
function TestInput(props, parentRef) {
return (
<div>
<input ref={parentRef} className="input-example"></input>
</div>
)
}
export default forwardRef(TestInput)
App.js
forwardRef一般都是和组件ref连用的,不会单独使用
import { useCallback, useRef } from "react";
import TestInput from "./components/TestInput";
function App() {
const testInputRef = useRef(null)
const handleClick = useCallback(() => {
testInputRef.current.focus()
})
return (
<div>
<TestInput ref={testInputRef}/>
<button onClick={handleClick}>click me</button>
</div>
)
}
export default App;
useImperativeHandle
用于向父组件暴露子组件实例的特定函数。它通常与forwardRef一起使用,在子组件中定义外部可以调用的实例方法。文章来源:https://www.toymoban.com/news/detail-634905.html
- 在子组件中使用forwardRef,将ref作为第二个参数传递给子组件;第三个参数是依赖项
const ChildComponent = forwardRef((props, ref) => {
// 定义需要暴露给父组件的方法
useImperativeHandle(ref, () => ({
// 这里定义需要暴露给父组件的方法
focus: () => {
// 在这里编写具体的逻辑
// 注意:这里的 focus 是一个示例,你可以定义任何你需要的方法
// 你可以在该方法内部执行子组件的某个操作
// 这个方法会被父组件调用
},
// 定义其他的方法...
}));
// 渲染子组件的 JSX
return <div>子组件</div>;
});
export default ChildComponent;
- 在父组件中创建一个ref对象,并将其传递给子组件:
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
// 创建 ref 对象
const childRef = useRef();
// 在父组件中可以通过调用子组件的方法来访问子组件的实例
const handleClick = () => {
childRef.current.focus(); // 调用子组件的 focus 方法
};
return (
<div>
<button onClick={handleClick}>调用子组件方法</button>
<ChildComponent ref={childRef} />
</div>
);
};
export default ParentComponent;
useContext
允许组件之间通过除了props以外的情况去共享数据
如果组件属性传递超过了4层,可以考虑使用上下文
上下文大多数是用来做全局数据管理的文章来源地址https://www.toymoban.com/news/detail-634905.html
- 创建上下文:
context/themeContext.js
import { createContext } from "react";
const ThemeContext = createContext("light")
export default ThemeContext
- 给自定义上下文设置值
import { useCallback, useState } from "react";
import ThemeContext from "./context/themeContext";
import TestInput from "./components/TestInput";
function App() {
const [theme, setTheme] = useState("light")
const changeTheme = useCallback(() => {
setTheme(prev => {
if (prev === 'light') return "dark"
return "light"
})
})
return (
<div className="wrapper">
<ThemeContext.Provider value = {theme}>
<TestInput />
<button onClick={changeTheme}>change theme</button>
</ThemeContext.Provider>
</div>
)
}
export default App;
- 在组件中获取上下文中的值
import { useContext } from "react"
import ThemeContext from "../../context/themeContext"
export default function TestInput(props) {
const contextValue = useContext(ThemeContext)
return (
<div style={{background: contextValue === 'light' ? "#fff" : "#666"}}>
<input></input>
</div>
)
}
到了这里,关于React18 hook学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!