基础hook的学习呀

二. hooks基础

1. State Hook

State Hook的API就是 useState，我们在前面已经进行了学习：

• useState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。
• useState接受唯一一个参数，在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。
• useState是一个数组，我们可以通过数组的解构，来完成赋值会非常方便。

FAQ：为什么叫 useState 而不叫 createState?

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

在useState中，可以传函数

import React, {
   useState} from 'react';

export default function CounterHook() {
   
  const [count, setCount] = useState(() => 10);

  console.log("CounterHook渲染");

  function handleBtnClick() {
   
    //虽然执行了4次，但是也只会一次增加10
    // setCount(count + 10);
    // setCount(count + 10);
    // setCount(count + 10);
    // setCount(count + 10);
    
    //会在执行完成之后进行赋值，点击之后就会增加40
    setCount((prevCount) => prevCount + 10);
    setCount((prevCount) => prevCount + 10);
    setCount((prevCount) => prevCount + 10);
    setCount((prevCount) => prevCount + 10);
  }

  return (
    <div>
      <h2>当前计数: {
   count}</h2> //现在显示的初识值就是10
      <button onClick={
   e => setCount(count + 1)}>+1</button>
      <button onClick={
   e => setCount((prevCount) => prevCount + 10)}>+10</button>
      <button onClick={
   handleBtnClick}>+10</button>
      <button onClick={
   e => setCount(count - 1)}>-1</button>
    </div>
  )
}

2. Effect Hook

目前我们已经通过hook在函数式组件中定义state，那么类似于生命周期这些呢？

• Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
• 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
• 所以对于完成这些功能的Hook被称之为 Effect Hook；

2.1. Effect基本使用

假如我们现在有一个需求：页面的title总是显示counter的数字

使用class组件如何实现呢？

• 我们会发现 document.title 的设置必须在两个生命周期中完成；
• 这是因为React的class组件并没有给我们提供一个统一的生命周期函数，可以让无论是否是第一次渲染都会执行的生命周期函数；

import React, {
    PureComponent } from