【React】Hooks混合应用

最新推荐文章于 2024-10-17 13:48:18 发布

Tiffany_Ho

最新推荐文章于 2024-10-17 13:48:18 发布

阅读量175

点赞数 3

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_45718102/article/details/142072619

版权

#官方现在也是推荐使用函数式组件，非类式组件，那没有了this就不太好操作，这时候就需要使用到hooks#

最常用的有useRef、useState、useEffect

今天结合这三个写了一个案例

import { FC, useRef, useState, useEffect } from "react";
import { Input } from "antd";
import "./index.css";

interface InputElement {
  input: HTMLInputElement;
}

const AllHooks: FC = () => {
  const inputRef = useRef<InputElement>(null);
  const [value, setValue] = useState<string>("123");
  // 确认修改值
  const confirmVal = () => {
    setValue(inputRef.current?.input.value ?? "");
  };

  /**
   * 依赖数组为空，只在首次渲染后执行
   * 为什么打印了两次？？
   * 开启了严格模式（StrictMode）,会故意使组件重新渲染两次，以便更容易发现潜在的副作用和其他问题。
   */
  useEffect(() => {
    let timer = setInterval(() => {
      console.log("secondCounter");
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  /**
   * 监听枚举值里的变量
   */
  useEffect(() => {
    console.log("modified");
  }, [value]);

  return (
    <div>
      <span>主题： {value}</span>
      <Input
        ref={inputRef}
        defaultValue={value}
        placeholder="Please Enter"
        onPressEnter={confirmVal}
      />
    </div>
  );
};

export default AllHooks;

记录

Q： useEffect首次渲染为什么打印了两次？

A：开启了严格模式（StrictMode）,会故意使组件重新渲染两次，以便更容易发现潜在的副作用和其他问题。