react hook 官方文档阅读笔记

useState

　　是在函数调用时保存变量的方式 —— useState是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。

const [count, setCount] = useState(0); 括号里边为初始值，count为初始变量名，setCount和count是一对出现，setCount即为设置count的方法。

存储多个变量就多次调用useState.

 

为什么叫 useState 而不叫 createState?

“Create” 可能不是很准确，因为 state 只在组件首次渲染的时候被创建。在下一次重新渲染时，useState 返回给我们当前的 state。否则它就不是 “state”了！这也是 Hook 的名字总是以 use开头的一个原因。

 

useEffect　　

处理副作用，可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

Hook 允许我们按照代码的用途分离他们， 而不是像生命周期函数那样。React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。

 

 

 useEffect 的第二个可选参数： （性能优化时候使用）

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);
count发生变化的时候才更新，如果不变不更新。
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行

另外需要注意：

1.在 Hook 中，清除 effect 是设计在同一个地方执行的，当 effect 返回一个函数，React 将会在执行清除操作时调用它，即在卸载组件时执行 clearInterval ，保证了同一个 effect 的逻辑可以放在一起。

import React， { useState， useEffect } from "react";

function Example() {
  const [count， setCount] = useState(0);
  let interval = null;

  useEffect(() => {
    document.title = `count is ${count}`;
    interval = setInterval(() => {
      setCount(count + 1);
    }， 1000);

    //若存在，则清除 effect 操作
    return clearInterval(interval);
  });

  return (
    <div>
      <p>count is {count}</p>
    </div>
  );
}

　　

 

2.自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 use 开头。 

import React, { useState, useEffect } from "react";

function useSetCount(c,n) {
  const [count， setCount] = useState(c);
  let interval = null;

  useEffect(() => {
    interval = setInterval(() => {
      setCount(count + n);
    }， 1000);

    return clearInterval(interval);
  });

  return count;
}

function ExampleA(props) {
  const count = useSetCount(1, 1);

  return (
    <div>
      <p>count is {count}</p>
    </div>
  );
}

function ExampleB(props) {
  const count = useSetCount(10, 10);

  return (
    <div>
      <p>count is {count}</p>
    </div>
  );
}