React Hooks 详细教程
简介
React Hooks 是 React 16.8 版本引入的一个新特性,它允许你在不编写类的情况下使用 state 以及其他 React 特性。Hooks 提供了函数组件中使用 state 和其他 React 特性的能力。
常用 Hooks
useState Hook
useState
是一个 Hook,它返回一个 state 变量和一个更新这个 state 的函数。在初始渲染时,state 变量的值等于传递给 useState
的第一个参数。
示例
以下是一个简单的计数器组件,使用 useState
Hook 来管理计数器的值:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
); } export default Counter;
useEffect Hook
useEffect
可以让你在函数组件中执行副作用操作(例如数据获取、订阅或手动修改 DOM 等)。它可以被看作是 componentDidMount
,componentDidUpdate
和 componentWillUnmount
这三个生命周期方法的组合。
示例
以下是一个使用 useEffect
Hook 的例子,它在组件挂载后从 API 获取数据:
import React, { useEffect, useState } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(json => setData(json));
}, []); // 空数组作为第二个参数表示这个 effect 只在组件挂载和卸载时运行
return (
{data ? (
{JSON.stringify(data, null, 2)}
) : (
Loading…
)}
);
}
export default DataFetcher;
总结
React Hooks 提供了在函数组件中使用 state 和其他 React 特性的能力,极大地增强了函数组件的灵活性。通过 useState
和 useEffect
等常用 Hooks,你可以轻松地在函数组件中管理 state 和执行副作用操作。