Hook

https://reactjs.bootcss.com/docs/hooks-intro.html

1. react的函数式组件和class类组件的区别，class类组件具有私有数据和生命周期函数，而函数式组件没有，但是react为函数式组件提供了Hook函数，让原本不具备私有数据和生命周期的函数式组件具备类组件的私有数据和生命周期，还是觉得类组件好点

2. Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

3. Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

State Hook

useState本身是（react提供的方法）一个从React对象上解构出来的函数，当我们给它传入一个参数是，它会返回一个数组  [‘传入的参数’， ‘函数’], 数组的第一项是传入的参数，第二项是一个函数，这个函数类似于class组件中修改setstate( )方法，调用这个函数可以修改初始定义的值

当你想要有多个初始值的时候，那就多定义几个吧，react官方也是这样说的，其实在参数的可以写成对象的形式，但是调用方法的时候就不好了

import React, { useState } from "react";

function List() {
  console.log(useState(0), "useState");
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState("hook参数");
  // console.log(count)
  return (
    <div>
      <div}>函数式组件使用hook，具备类组件的功能 -- {count}</div>                         // 读取的话值直接这样写变量名就行
      <button onClick={() => {setCount(count + "6666666")}}>hook改变数据</button>
    </div>
  );
}

export default List;

 

Effect Hook（副作用）

• https://reactjs.bootcss.com/docs/hooks-effect.html
• useEffect相当于：componentDidMount，componentDidUpdate,componentWillUnmount的结合体
• 将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props），当这个变量改变时相当于组件本身改变
• 在函数式组件中，因为没有生命周期的缘故，Hook提供了 effect 用来监听组件的状态，当页面挂载和更新时，触发
• useEffect (cb, [])，的第一个参数是一个回调函数，第二个参数可有可无是一个数组，当组件挂载，更新，卸载的时候会执行，当组件卸载的时候，第一个回调函数需要

return一个函数，在函数内部执行

import React, { useState, useEffect } from "react";
import Delete from "./Delete.jsx"

export default function List() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);
  const [name, setName] = useState("范顺");
  const [flag, changeFlag] = useState(true);

  useEffect(() => {                   // 组件挂载和更新
    console.log("组件挂载和更新");
  });

  useEffect(() => {
    console.log("count组件更新");
  }, [count]);

  useEffect(() => {
    console.log("name组件更新");
  }, [name]);

  // 只希望在组件挂载后做某些事情    componentDidMount
  useEffect(() => {
    // 组件挂载后执行
    console.log("组件挂载后执行");
  }, []); // 第二个参数为空数组

  return (
    <div>
      <div>姓名：{name} </div>
      <div>函数式组件 加 {count}</div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        useState
      </button>
      <br />
      <br />
      <br />
      { flag ? <Delete></Delete> : ''}
      <button onClick={() => {changeFlag(!flag)}}>{flag ? "卸载" : "加载"}</button>
    </div>
  );
}

export default function Delete() {              
  useEffect(() => {
    // 组件挂载和更新
    console.log("useEffect组件挂载");
    return () => {                                // 当前组件卸载的时候，第一个回调函数内部接收retu闰年一个函数
      console.log("useEffect组件卸载");
    };
  });
  return <div>useEffect的第二个参数</div>;
}

 useRef Hook (获取dom元素，侦听useState的值)

1. 　　获取dom元素
2. 　　获取改变的之前useState的数据，然后做一些事情

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

export default function Delete() {
  const [name, setName] = useState("范顺");
  const ref = useRef(null); // 函数式组件使用Hook提供的useRef，获取dom节点
  const flag = useRef(false);
  const changeref = useRef({ name });
  useEffect(() => {
    // 组件挂载和更新
    console.log(ref.current, "useRef"); // 获取dom元素
    console.log(changeref.current, name, "改变了name");

    changeref.current = {
      name
    }
  });
  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
      />
      {name}
      <div ref={ref}>useEffect的第二个参数</div>
    </div>
  );
}