1.保存状态（useState）
import React, { useState } from 'react';
function Example() {
// 创建一个保存 count 的 state，并给初始值 0
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
+
</button>
</div>
);
}
- useState(initialState) 的参数 initialState 是创建 state 的初始值，它可以是任意类型，比如数字、对象、数组等等。
- useState() 的返回值是一个有着两个元素的数组。第一个数组元素用来读取 state 的值，第二个则是用来设置这个 state 的值。在这里要注意的是，state 的变量（例子中的 count）是只读的，所以我们必须通过第二个数组元素 setCount 来设置它的值。
- 如果要创建多个 state，那么我们就需要多次调用 useState。比如要创建多个 state.
state中永远不要保存可以通过计算得到的值
2.执行副作用（useEffect）
import React, { useState, useEffect } from "react";
function BlogView({ id }) {
// 设置一个本地 state 用于保存 blog 内容
const [blogContent, setBlogContent] = useState(null);
useEffect(() => {
// useEffect 的 callback 要避免直接的 async 函数，需要封装一下
const doAsync = async () => {
// 当 id 发生变化时，将当前内容清楚以保持一致性
setBlogContent(null);
// 发起请求获取数据
const res = await fetch(`/blog-content/${id}`);
// 将获取的数据放入 state
setBlogContent(await res.text());
};
doAsync();
}, [id]); // 使用 id 作为依赖项，变化时则执行副作用
// 如果没有 blogContent 则认为是在 loading 状态
const isLoading = !blogContent;
return <div>{isLoading ? "Loading..." : blogContent}</div>;
}
- 每次 render 后执行：不提供第二个依赖项参数。比如useEffect(() => {})。
- 仅第一次 render 后执行：提供一个空数组作为依赖项。比如useEffect(() => {}, [])
- 第一次以及依赖项发生变化后执行：提供依赖项数组。比如useEffect(() => {}, [deps])
- 组件 unmount 后执行：返回一个回调函数。比如useEffect() => { return () => {} }, [])
3.注意事项
- Hooks 只能在函数组件的顶级作用域使用，所谓顶层作用域，就是 Hooks 不能在循环、条件判断或者嵌套函数内执行，而必须是在顶层。
- Hooks 只能在函数组件或者其它 Hooks 中使用
个人学习记录，侵权可删
