函数式组件的 Hooks使用

1. Hooks 是什么，有什么作用？

1.1 解决代码逻辑的复用。

1.2 解决class类式组件的this指向繁琐的问题。

2. useState、useEffect 、useRef的使用。

2.1 useState的使用

import React, { useState } from 'react';

export default function Test() {
  const [count, setCount] = useState(100);

  const handelAdd = () => {
    //  写法1
    setCount(count + 1);
    //   写法2
    setCount((preCount) => {
      return preCount + 1;
    });
  };

  return (
    <div>
      <div>这是一个计数器： {count}</div>
      <button onClick={handelAdd}>点击+1</button>
    </div>
  );
}

2.1.1 作用和使用的注意事项：

作用：

2.1.0.1 相当于 this.setState() 函数修改状态的值，驱动视图的改变

注意事项：

2.1.1.1 不能在if/for循环中使用 

2.1.1.2 不能在非 use函数（自定钩子函数）或者是普通的函数中使用

2.1.1. 3 先定义后使用

2.1.1.4 不能直接修改状态的值

2.2 useEffect 的使用

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

/**
 *
 * 实现需求：
 *  1. 当页面加载完成的时候，监听一个resize事件，窗口发生改变的时候，打印
 *  2. 当页面组件卸载的时候，卸载resize事件，停止输出
 */
export default function Test() {
  const [isShow, setIsShow] = useState(true);

  const handelClear = () => {
    setIsShow(false);
  };

  return (
    <div>
      {isShow && <Child />}
      <button onClick={handelClear}>点击组件销毁</button>
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log('react 真棒！');
  };
  useEffect(() => {
    window.addEventListener('resize', resizeFn);
    return () => {
      window.removeEventListener('resize', resizeFn);
    };
  }, []);

  return <div>子组件</div>;
}

 

 2.2.1 几种用法

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

....

function Child() {
  const [count, setCount] = useState(0);
  const resizeFn = () => {
    console.log('react 真棒！');
  };

  // 用法1
  useEffect(() => {
    //   挂载完成执行
    window.addEventListener('resize', resizeFn);
    //  当组件的任何数据发生改变的时候都会触发一次
    //   在这里我们可以进行开启定时器，订阅信息，发送异步请求
  });

  // 用法2
  useEffect(() => {
    //   挂载完成执行
    window.addEventListener('resize', resizeFn);
    //  当组件的 count数据(依赖项，依赖项可以是多个) 数据发生改变的时候都会触发一次
    //  在这里我们可以进行一些操作，例如我们进行数据持久化（本地存储）
  }, [count]);

  // 用法3
  useEffect(() => {
    //   挂载完成执行和当（count依赖项）数据发生改变的时候都会执行一次
    window.addEventListener('resize', resizeFn);
    return () => {
      //  组件卸载执行
      window.removeEventListener('resize', resizeFn);
    };
  }, [count]);

  return <div>子组件</div>;
}

2.2.2 注意事项：

        2.2.2.1 在 useEffect(() => {  这里最好不要直接写 async-await 的写法，最好在外面定义好异步的任务，在这里直接调用   })

2.3 useRef的使用

作用：

1. 获取dom元素。

2. 获取组件实例对象。

3. 保存数据。

// 前面两个作用我们经常使用，第三个在这里写写
import React, { useEffect, useRef, useState } from 'react';

export default function Test() {
  const [isShow, setIsShow] = useState(true);

  const handelClear = () => {
    setIsShow(false);
  };

  return (
    <div>
      {isShow && <Child />}
      <button onClick={handelClear}>点击组件销毁</button>
    </div>
  );
}

function Child() {
  const useRefs = useRef();

  useEffect(() => {
    // 挂载
    useRefs.current = setInterval(() => {
      console.log('开始计时');
    }, 1000);
  }, []);

  useEffect(() => {
    return () => {
      // 卸载
      clearInterval(useRefs.current);
      console.log('卸载完成');
    };
  }, []);
  return <div>子组件</div>;
}

总结：多学多练