React 16新增的hook
时间: 2023-03-12 17:59:26 浏览: 6
React_Hooks
React 16 新增了一些 hook,其中最重要的是 `useState` 和 `useEffect`。
`useState` 可以让你在函数组件中使用状态(state)。它接受一个参数,表示状态的初始值,并返回一个包含状态值和更新函数的数组。例如:
```
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```
`useEffect` 可以让你在函数组件中执行副作用(side effect)。它接受两个参数:一个函数,表示要执行的副作用;以及一个数组,表示触发副作用的条件。例如:
```
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```
还有很多其他的 hook,比如 `useContext`,`useReducer`,`useCallback` 等等,可以帮助你在函数组件中使用更多的 React 特性。
阅读全文