React Hooks 是 React 16.8 版本引入的新特性,它允许在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些关于 React Hooks 的基本概念和用法。
什么是 Hooks?
Hooks 是 React 16.8 引入的新特性,它允许你在不编写类的情况下使用 state 以及其他的 React 特性。Hooks 让你在函数组件中“钩子”到 React state 以及生命周期特性。
常用 Hooks
useState
:用于在函数组件中添加 state。useEffect
:用于在组件挂载和更新后执行副作用操作。useContext
:用于在组件中订阅 context。useReducer
:用于替代useState
和useContext
的更复杂的状态逻辑。useCallback
:用于缓存回调函数。useMemo
:用于缓存计算结果。
示例
以下是一个使用 useState
和 useEffect
的简单示例:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `你点击了 ${count} 次`;
}, [count]); // 依赖项数组
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
点击
</button>
</div>
);
}
扩展阅读
更多关于 React Hooks 的内容,可以参考官方文档:React Hooks。
React Hooks 示例