认识Hook

Hook 是什么? Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如， useState 是允许 你在 React 函数组件中添加 state 的 Hook。
什么时候我会用 Hook? 如果你在编写函数组件并意识到需要向其添加⼀一些 state，以前的做法是必须 将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。

import React, { useState } from "react";
export default function HookPage(props) { // 声明⼀一个叫 “count” 的 state 变量量，初始化为0 const [count, setCount] = useState(0); return (
    <div>
      <h3>HookPage</h3>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>add</button>
</div>
); }

使用 Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作。
数据获取，设置订阅以及⼿动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作，或 是“副作用”这个名字，应该都在组件中使用过它们。

import React, { useState, useEffect } from "react";
export default function HookPage(props) {
// 声明⼀一个叫 “count” 的 state 变量量，初始化为0
const [count, setCount] = useState(0);
// 与 componentDidMount 和 componentDidUpdate相似 useEffect(() => {
// 更更新 title
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <h3>HookPage</h3>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>add</button>
</div>
); }

在函数组件主体内(这里指在 React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录⽇志以及执 ⾏其他包含副作⽤用的操作都是不不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。
使⽤ useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以 把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。
默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 在只有某些值改变的时候 才执行。

effect 的条件执⾏

默认情况下，effect 会在每轮组件渲染完成后执⾏。这样的话，⼀一旦 effect 的依赖发生变化，它就会被 重新创建。
然⽽，在某些场景下这么做可能会矫枉过正。比如，在上⼀一章节的订阅示例例中，我们不需要在每次组件 更新时都创建新的订阅，而是仅需要在 source props 改变时重新创建。
要实现这一点，可以给 useEffect 传递第二个参数，它是 effect 所依赖的值数组。更更新后的示例如下

import React, { useState, useEffect } from "react";
export default function HookPage(props) {
// 声明⼀一个叫 “count” 的 state 变量量，初始化为0 const [count, setCount] = useState(0);
const [date, setDate] = useState(new Date());
// 与 componentDidMount 和 componentDidUpdate相似 useEffect(() => {
// 更更新 title
    document.title = `You clicked ${count} times`;
  }, [count]);
  useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date());
    }, 1000);
}, []);
  return (
    <div>
      <h3>HookPage</h3>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>add</button>
      <p>{date.toLocaleTimeString()}</p>
</div>
); }

此时，只有当 useEffect第⼆个参数数组里的数值 改变后才会重新创建订阅。

清除 effect

通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器器 ID 等资源。要实现这一点， useEffect 函数需返回一个清除函数，以防⽌内存泄漏漏，清除函数会在组件卸载前执行。

useEffect(() => {
  const timer = setInterval(() => {
    setDate(new Date());
  }, 1000);
  return () => clearInterval(timer);
}, []);

⾃定义Hook

有时候我们会想要在组件之间重⽤用一些状态逻辑。⽬前为止，有两种主流⽅方案来解决这个问题:高阶组 件和 render props。⾃定义 Hook 可以让你在不增加组件的情况下达到同样的目的。
⾃定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调⽤其他的 Hook。

import React, { useState, useEffect, useMemo } from "react";
export default function CustomHookPage(props) { //定义⼀一个叫count的state变量量，初始化为0
const [count, setCount] = useState(0); //和didMount、didUpdate类似
useEffect(() => {
console.log("count effect");
// 只需要在count发⽣生改变的时候执⾏行行就可以啦 document.title = `点击了了${count}次`;
}, [count]);
  return (
    <div> 
<h3>⾃自定义Hook</h3>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>add</button> <p>{useClock().toLocaleTimeString()}</p>
</div>
); }
//⾃自定义hook，命名必须以use开头 function useClock() {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
console.log("date effect"); //只需要在didMount时候执⾏行行就可以了了 const timer = setInterval(() => {
setDate(new Date());
}, 1000); //清除定时器器，类似willUnmount
return () => clearInterval(timer);
}, []);
  return date;
}

Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则:
只能在函数最外层调⽤ Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。(还有一个地⽅可 以调⽤Hook —— 就是⾃定义的 Hook 中。)

useMemo

把“创建”函数和依赖项数组作为参数传入 useMemo ，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进⾏高开销的计算。

import React, { useState, useMemo } from "react";
export default function UseMemoPage(props) {
  const [count, setCount] = useState(0);
  const expensive = useMemo(() => {
    console.log("compute");
    let sum = 0;
    for (let i = 0; i < count; i++) {
sum += i; }
return sum;
//只有count变化，这⾥才重新执⾏
}, [count]);
const [value, setValue] = useState(""); return (
    <div>
      <h3>UseMemoPage</h3> 
<p>expensive:{expensive}</p>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>add</button>
      <input value={value} onChange={event => setValue(event.target.value)} />
</div>
); }

useCallback

把内联回调函数及依赖项数组作为参数传入 useCallback ，它将返回该回调函数的 memoized 版本， 该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate )的子组件时，它将非常有⽤。

import React, { useState, useCallback, PureComponent } from "react";
export default function UseCallbackPage(props) {
  const [count, setCount] = useState(0);
  const addClick = useCallback(() => {
    let sum = 0;
    for (let i = 0; i < count; i++) {
sum += i; }
    return sum;
  }, [count]);
  const [value, setValue] = useState("");
  return (
    <div>
      <h3>UseCallbackPage</h3>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>add</button>
      <input value={value} onChange={event => setValue(event.target.value)} />
      <Child addClick={addClick} />
</div>
); }
class Child extends PureComponent {
  render() {
    console.log("child render");
    const { addClick } = this.props;
    return (
      <div>
        <h3>Child</h3>
        <button onClick={() => console.log(addClick())}>add</button>
</div>
); } }

useCallback(fn, deps) 相当于 useMemo(() => fn, deps) 。
注意
依赖项数组不会作为参数传给“创建”函数。虽然从概念上来说它表现为:所有“创建”函数中引用的 值都应该出现在依赖项数组中。未来编译器会更加智能，届时自动创建数组将成为可能。