React Hook（钩子）-- useState和useEffect

sunshine22 girl

已于 2023-08-25 15:25:11 修改

阅读量145

点赞数 1

分类专栏： React Typescript 前端文章标签： react.js 前端 typescript

于 2023-08-25 15:09:20 首次发布

本文链接：https://blog.csdn.net/annier_11/article/details/132495832

版权

前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

Typescript

7 篇文章 0 订阅

订阅专栏

React

4 篇文章 0 订阅

订阅专栏

本文介绍了React中的useState和useEffectHook，前者用于管理组件状态，后者处理副作用，如响应式数据更新和DOM操作。通过实例展示了如何在组件中使用这两个Hook进行状态管理和外部系统的同步。

摘要由CSDN通过智能技术生成

Hook 让你可以在组件中使用不同的 React 功能。你可以使用内置的 Hook 或者把它们组合起来建立你自己的，这里记录一下自己对于useState和useEffect的理解。

一.useState：状态钩子

useState声明了一个你可以直接更新的 state 变量。

useState 是一个 React Hook，它允许你向组件添加一个状态变量。

useState 返回一个由两个值组成的数组：

const [state, setState] = useState(默认值);

当前的 state。在首次渲染时，它的默认值就是useState 括号中的那个值。
set 函数，它可以让你将 state 更新为不同的值并触发重新渲染。

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...

二.useEffect：副作用钩子

Effect 让一个组件连接到外部系统并与之同步。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的 widgets 以及其他非 React 代码。

useEffect 将一个组件连接到外部系统，它有两个参数，

useEffect(setup, dependencies?)

1.setup：处理 Effect 的函数；

2.dependencies：处理函数中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数,即：函数（第一个参数）中会用到的的变量等，并且必须像 [dep1, dep2, dep3] 这样内联编写；

//引入
import React, {useState, useEffect} from 'react';

// 函数式组件
// 状态钩子：useState
// 副作用钩子：useEffect
const App: React.FC = (props) => {
  // tuple元组
  const [count, setCount] = useState<number>(0)
  const [robotGallery, setRobotGallery] = useState<any>([])

  useEffect(() => {
    document.title = `点击了${count}次`
  }, [count])

  // 注意：不能遗漏useEffect的第二个参数，不然会进入无限循环状态
  useEffect(() => {
    fetch('http://jsonplaceholder.typicode.com/users')
    .then(response =>  response.json())
    .then(res => setRobotGallery(res))
  }, [])

  return (
    <div className={styles.app}>
      <button 
        onClick={() => {
          setCount(count + 1)
        }}
      >Click</button>
      <span>count: {count}</span>
      <div className={styles.robotList}>
        {robotGallery.map((r, index) => (
          <Robot key={index} id={r.id} name={r.name} email={r.email} username={r.username} />
        ))}
      </div>
    </div>
  )
};