什么是 React Hooks?

在 React 中,有 hooks 本质上赋予函数组件“挂钩”到 React 的特性(例如状态和其他方法)的权限。在使用钩子时应牢记三个一般规则。

React Hooks 规则:

1. Hooks 只能在 React 函数组件内部调用

2. Hooks 只能在函数组件的顶层调用

3. Hooks 不能有条件

副作用

如果函数被调用并且该函数导致函数本身之外的更改,则该函数被认为具有副作用。常见副作用的示例包括发出请求、从数据库中获取数据、合并计时器、直接更新 DOM 等。

useEffect Hook

React 中可用的 useEffect hook 允许我们执行前面在函数组件中提到的一些副作用。要使用这个钩子,首先需要导入它。

import React, { useEffect } from "react";

进入全屏模式 退出全屏模式

在我们想要执行副作用的函数组件内部,我们可以调用 useEffect 钩子并传入一个回调函数,该函数将起到所需的副作用的作用。

function App() {
 //side effect function
  useEffect(
     () => {
       console.log("Hello, I am second");
     }
  );
  console.log("Hi, I am first");
  return (
    <div> 
       <button>Click me</button>
       <input type="text" placeholder="Type here..." />
    </div>
  )
}

进入全屏模式 退出全屏模式

当我们运行上面的代码时,消息将按以下顺序出现:

1\。你好,我是第一个

2\。你好,我是第二个

通过在 useEffect 钩子中传递控制台消息,我们告诉功能组件在渲染后执行某些操作,即控制台记录我们想要的消息。我们可以在钩子中做其他事情,例如获取数据、创建计时器或更新 DOM。

useEffect 依赖项

因为 useEffect 挂钩在每个渲染上运行,这意味着它可能会多次执行副作用,我们需要使用依赖项来控制它。为了控制渲染的数量,我们可以在 useEffect 钩子中加入第二个参数,一个依赖数组。

无依赖

useEffect(() => {
   //Runs on every render
});

进入全屏模式 退出全屏模式

空数组

useEffect(() => {
   //Runs only on the first render
}, []);

进入全屏模式 退出全屏模式

道具/状态值

useEffect(() => {
   //Runs on the first render 
   //And when dependency value changes 
}, [prop, state]);

进入全屏模式 退出全屏模式

现在,您已经掌握了使用 useEffect 挂钩所需的入门知识,继续尝试吧!祝你好运!