React 中常见的Hooks,安排！
哈喽小伙伴们大家好！我是小李，今天是年后开工的第一天，相信大家已经元气满满，准备好迎接新的一年的挑战了吧！打起精神来，我们继续加油呀！今天，给大家分享一道我之前面试被问到相关Hooks的一道题目，今天先来说说react的，下期文章为大家分享vue的，希望对大家有所帮助！
首先，什么是Hooks?为什么会有Hooks这个东西？
所谓Hooks,它其实就是一些特殊的函数，也称钩子函数，它允许开发者在不编写 class 的情况下使用 state 以及其他 React 特性。简单来说，Hooks 就是一些特殊的函数，这些函数可以让你 “钩入”（Hook into） React 的状态和生命周期等特性。
1、useState
用于在函数组件中添加 state。state 是 React 组件中的一个重要概念，它允许组件存储和管理动态数据。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;2、useEffect
用于处理副作用操作，比如数据获取、订阅、手动修改 DOM 等。它类似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 这几个生命周期方法的组合。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// 更新文档标题
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example;3、useContext
用于在组件之间共享数据，避免通过中间组件层层传递 props。它需要和 React.createContext 一起使用。
import React, { createContext, useContext, useState } from 'react';
// 创建一个 Context 对象
const ThemeContext = createContext();
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
</ThemeContext.Provider>
);
}
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
// 使用 useContext 获取 ThemeContext 的值
const theme = useContext(ThemeContext);
return <button style={
{ background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
Themed Button
</button>;
}
export default App;接下来是一些不常见的。
1、useReducer
是 useState 的替代方案，适用于复杂的 state 逻辑或多个子值需要更新的情况。它使用一个reducer 函数来管理 state 的更新。
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);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
);
}
export default Counter;2、useCallback
返回一个 memoized 回调函数，用于优化性能。当父组件重新渲染时，使用 useCallback 可以避免子组件因为传入的回调函数引用变化而不必要地重新渲染。
import React, { useState, useCallback } from 'react';
function Parent() {
const [count, setCount] = useState(0);
// 使用 useCallback 缓存回调函数
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child onClick={handleClick} />
</div>
);
}
function Child({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
export default Parent;3、useMemo
返回一个 memoized 值，用于优化性能。它会在依赖项发生变化时重新计算值，避免在每次渲染时都进行昂贵的计算。
import React, { useState, useMemo } from 'react';
function App() {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
// 使用 useMemo 缓存计算结果
const sum = useMemo(() => {
console.log('Calculating sum...');
return a + b;
}, [a, b]);
return (
<div>
<p>a: {a}</p>
<p>b: {b}</p>
<p>Sum: {sum}</p>
<button onClick={() => setA(a + 1)}>Increment a</button>
<button onClick={() => setB(b + 1)}>Increment b</button>
</div>
);
}
export default App;4、useRef
返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。它可以用来访问 DOM 节点或在多次渲染之间保存值。
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
export default TextInputWithFocusButton;好啦，今天的分享就到这里，整理不易，如果觉得对你有帮助，欢迎给个三连支持，我是小李，我们下期见！