useState()
useState用于在函数组件中管理状态。
它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值，并更新状态。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return <button onClick={handleClick}>Count: {count}</button>;
}
useEffect()
useEffect用于在函数组件中处理副作用。例如数据获取、订阅、手动更改 DOM 等
它接受两个参数：一个副作用函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，副作用函数将被调用。
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(time + 1);
}, 1000);
return () => clearInterval(interval);
}, [time]);
return <div>Time: {time}</div>;
}
useEffect和useLayoutEffect的区别
useEffect()和useLayoutEffect()主要的区别是调用时机不同。
useLayoutEffect()和componentDidMount()及componentDidUpate()一致，再react完成DOM更新后马上同步调用代码，它会阻塞页面的渲染，而useEffect()则会在页面渲染完后才会异步调用。
在实际使用中如果项避免页面抖动，可以把需要操作DOM的代码放在useLayoutEffect()中，在该函数中做DOM操作，这些DOM修改会和react做出的更改一起被一次性渲染到屏幕上，只有一次回流重绘的代价。
useLayoutEffect
使用场景: 处理 DOM 操作,需要同步执行
import { useLayoutEffect, useRef } from 'react';
function MeasureElement() {
const elementRef = useRef(null);
useLayoutEffect(() => {
const element = elementRef.current;
console.log('Element width:', element.offsetWidth);
}, []);
return <div ref={elementRef}>This is the element to measure</div>;
}
useCallback()
useCallback()为记忆函数，缓存函数引用,优化性能。它可以防止因为组件重新渲染，导致方法被重新创建，起到缓存作用。
它接受一个回调函数和一个依赖数组，并返回一个缓存的回调函数。当依赖数组中的任何一个值发生变化时，缓存的回调函数将被更新。
import React, { useState, useCallback } from 'react';
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<>
<Child onClick={handleClick} />
<span>Count: {count}</span>
</>
);
}
function Child({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
useMemo()
useMemo用于在函数组件中缓存计算结果。
它接受一个计算函数和一个依赖数组，并返回一个缓存的计算结果。当依赖数组中的任何一个值发生变化时，计算函数将被重新计算。
import React, { useMemo } from 'react';
function ExpensiveComponent({ value1, value2 }) {
const result = useMemo(() => {
console.log('calculating result');
return value1 * value2;
}, [value1, value2]);
return <div>Result: {result}</div>;
}
useCallback()与useMemo()的区别
useCallback()不会执行第一个参数函数，而是将其返回，useMemo()会执行第一个函数并且将函数执行结果返回给你。
useCallback()常用记忆时间按函数，生成记忆后的时间函数传递给子组件使用，useMemo()更适合经过函数计算得到一个确定的值，比如记忆组件。
React.memo()
接收一个组件A作为参数并返回一个组件B，如果组件B的props没有改变，则组件B会阻止组件A重新渲染。A和B本质上是同一个组件，但A是否进行重新渲染，需要由Props是否发生改变来决定。
学习视频：
Day10-03.React.memo-基础使用_哔哩哔哩_bilibili
useRef()
useRef用于在函数组件中引用DOM元素或其他值。
获取 DOM 元素引用,保存可变状态。它返回一个包含可变引用的对象。当在函数组件中传递该对象时，它将保留其引用，即使组件重新渲染。
import React, { useRef } from 'react';
function Input() {
const inputRef = useRef(null);
/**
* 使用useRef()创建了一个值后，就可以将其绑定到DOM节点上，
* 给DOM节点增加一个ref属性，将loginRef传入，则可以通过其current属性获取到DOM节点的值
*/
function handleClick() {
inputRef.current.focus();
}
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Focus input</button>
</>
);
}
useContext()
useContext用于在函数组件中使用上下文。
它接受一个上下文对象并返回上下文的当前值。当上下文的值发生变化时，函数组件将重新渲染。
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function Header() {
const theme = useContext(ThemeContext);
return (
<header style={{ background: theme }}>
<h1>My App</h1>
</header>
);
}
function App() {
return (
<ThemeContext.Provider value="dark">
<Header />
</ThemeContext.Provider>
);
}
useReducer()
useReducer用于在函数组件中管理复杂的状态。
它接受一个reducer函数和一个初始状态，并返回一个包含当前状态和一个派发操作的数组。派发操作将一个操作对象发送到reducer函数中，并返回一个新的状态。
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
function handleIncrement() {
dispatch({ type: 'increment' });
}
function handleDecrement() {
dispatch({ type: 'decrement' });
}
return (
<>
<button onClick={handleIncrement}>+</button>
<span>{state.count}</span>
<button onClick={handleDecrement}>-</button>
</>
);
}
useImperativeHandle
使用场景: 暴露组件实例方法给父组件
import { forwardRef, useImperativeHandle, useRef } from 'react';
const CustomInput = forwardRef((props, ref) => {
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input type="text" ref={inputRef} />;
});
function App() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<CustomInput ref={inputRef} />
<button onClick={handleClick}>Focus Input</button>
</div>
);
}
参考文章
https://blog.csdn.net/m0_46612221/article/details/123384046