React-Hooks之保存状态和生命周期

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 中使用

个人学习记录，侵权可删