React Hooks 是 React 16.8 版本引入的新特性,它允许你在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些关于 React Hooks 的基本概念和案例。
常用 Hooks
useState
:用于在函数组件中添加 state。useEffect
:用于在组件渲染后执行副作用操作。useContext
:用于在组件树中共享值。useReducer
:用于替代useState
的更复杂的状态逻辑。useCallback
:返回一个记忆化的回调函数。useMemo
:返回一个记忆化的值。
示例
假设我们有一个简单的计数器组件,使用 useState
和 useEffect
来实现:
import React, { useState, useEffect } from 'react';
function Counter() {
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>
);
}
扩展阅读
想要了解更多关于 React Hooks 的内容,可以阅读官方文档。
React Hooks 示例