React hook
- 在react16.8中 新增 react hook 这么个特性，能够使我么们不用Class组件而使用State以及其他的一些特性
- react hook 大致分为 state hook 、Effect hook以及自定义 hook
state hook 的使用
import React, { useState } form 'react'
// 引入 useState
function Example() {
// 声明一个叫 "count" 的 state 变量，并设置初始值为0
// useState 方法它返回一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
点我加1
</button>
</div>
);
}
使用过程
- 引入 React 中的 useState Hook。它让我们在函数组件中存储内部 state。
- 在 Example 组件内部，我们通过调用 useState Hook 声明了一个新的 state 变量。它返回一对值给到我们命名的变量上。我们把变量命名为 count，因为它存储的是点击次数。我们通过传 0 作为 useState 唯一的参数来将其初始化为 0。第二个返回的值本身就是一个函数。它让我们可以更新 count 的值，所以我们叫它 setCount。
- 当用户点击按钮后，我们传递一个新的值给 setCount。React 会重新渲染 Example 组件，并把最新的 count 传给它。
Effect hook 的使用
- Effect Hook 可以让你在函数组件中执行副作用操作
- React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”
import React, { useState, useEffect } from 'react';
// 引入 useEffect
function Example() {
const [count, setCount] = useState(0);
// 类似于componentdidmount 和 componentdiddupdate
useEffect(() => {
// 使用浏览器API更新文档标题
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
点我加1
</button>
</div>
);
}
