首页 > 资讯 > 前端开发 > JavaScript >React中hook函数与useState及useEffect的使用

220

分享到

React中hook函数与useState及useEffect的使用

2024-04-02 19:04:59 220人浏览八月长安

摘要

目录1. 简介2. useState使用3. useEffect使用useEffect发起网络请求1. 简介在 React 的世界中，有容器组件和 UI 组件之分，在 React

1. 简介

在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数组件，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。React在v16.8 的版本中推出了 React Hooks 新特性，Hook是一套工具函数的集合,它增强了函数组件的功能，hook不等于函数组件，所有的hook函数都是以use开头。

使用 React Hooks 相比于从前的类组件有以下几点好处：

代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者修改代码时不易去查找，通过 React Hooks 可以将功能代码聚合，方便维护
组件树层级变浅，在原本的代码中，我们经常使用 HOC/render/Props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现

使用hook限制：

hook 只能用在函数组件中，class 组件不行
普通函数不能使用 hook，默认只能是函数组件才能用

例外：普通函数名称以 use 开头也可以，(自定义的函数以 use 开头，称为自定义 hook)

函数组件内部的函数也不能使用 hook
hook 函数一定要放在函数组件的第一层，别放在 if/for 中(块级作用域)
要求函数组件名称必须首字母大写

2. useState使用

概述：

类组件中有一个状态属性，可以通过此特殊属性完成私有数据的操作。操作此 state 数据可以触发视图更新（this.setState()）。

函数组件中，从 react16.8 之后，提供一个 hook 函数 useState 方法，它可以模拟出类组件中的状态。

语法：

let [变量，函数] = useState(值|()=>值)

变量就可以得到useState中的值，函数就可以修改值。值的存储使用了闭包。

使用：

import React, { useState } from 'react';
const App = () => {
  // 相当于在App函数组件是定义一个state数据，变量名为 count,修改此count的值的方法为setCount
  // 写法1：值
  // let [count, setCount] = useState(100)
  // 有的时候，在项目中的初始数据，要经过一系列的运算才能出来的初始值，这时候就可以使用函数的写法
  // 写法2：函数
  let [count, setCount] = useState(() => 100)
  const addCount = () => {
    setCount(count + 1)
  }
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

处理并发操作：

import React, { useState } from 'react';
const App = () => {
  let [count, setCount] = useState(() => 100)
  const addCount = () => {
    // 并发处理数据的完整性得不到保证
    // setCount(count + 1)  // 100+1
    // setCount(count + 1)  // 100+1
    // setCount(count + 1)  // 100+1
    // 并发处理 -- 推荐写法，这样写数据的完整性可靠的
    setCount(v => v + 1)
    setCount(v => v + 1)
    setCount(v => v + 1)
  }
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

使用useState完成表单项自定义hook函数：

如果我们有两个 input 框需要变为受控组件，我们可以这样写：

import React, { useState } from 'react';
const App = () => {
  let [username, setUsername] = useState('')
  let [passWord, setPassword] = useState('')
  return (
    <div>
      {}
      <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
      <input type="text" value={password} onChange={e => setPassword(e.target.value)} />
    </div>
  );
}
export default App;

上面的做法让 return 部分的代码太过复杂，我们可以使用自定义 hook 函数来简化这部分的代码：

import React, { useState } from 'react';
// 在react中，定义的函数是以use开头，则认为它就是一个自定义hook函数
// 在自定义hook函数中，可以调用内置hook
function useInput(initialValue = '') {
  let [value, setValue] = useState(initialValue)
  return { value, onChange: e => setValue(e.target.value.trim()) }
}
const App = () => {
  let usernameInput = useInput('')
  let passwordInput = useInput('')
  return (
    <div>
      {}
      <input type="text" {...usernameInput} />
      <input type="text" {...passwordInput} />
    </div>
  );
}
export default App;

我们还可以使用模块化的思想，将自定义 hook 函数拆分到另一个文件中：

useInput.js：

import { useState } from 'react';
// 在react中，定义的函数是以use开头，则认为它就是一个自定义hook函数
// 在自定义hook函数中，可以调用内置hook
const useInput = (initialValue = '') => {
  let [value, setValue] = useState(initialValue)
  return { value, onChange: e => setValue(e.target.value.trim()) }
}
export default useInput

App.jsx：

import React from 'react';
import useInput from './hook/useInput';
const App = () => {
  let usernameInput = useInput('')
  let passwordInput = useInput('')
  return (
    <div>
      <input type="text" {...usernameInput} />
      <input type="text" {...passwordInput} />
    </div>
  );
}
export default App;

3. useEffect使用

概述：

此 hook 可以模拟函数组件的生命周期，函数组件对于在一些生命周期中操作还是无能为力，所以 React 提供了 useEffect 来帮助开发者处理函数组件，来帮助模拟完成一部份的开发中非常常用的生命周期方法。常被别的称为：副作用处理函数。此函数的操作是异步的。

它并不能模拟全部的钩子函数，它只能模拟下面这几个：componentDidMount、componentDidUpdate、componentWillUnmout。

注意：useEffect中不能有返回值，React它要自动回收

比如说下面这种场景，我们希望 console.log 函数中的内容只打印一次，但是每当试图更新的时候，console.log 都会重新执行：

import React, { useState } from 'react';
const App = () => {
  let [count, setCount] = useState(100)
  const addCount = () => setCount(count + 1)
  console.log('App -- 要求此处只打印一次');
  return (
    <div>
      <h3>App组件 --- {count}</h3>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

这时候我们就可以使用 useEffect 函数来实现上述需求。

使用：

模拟：componentDidMount componentDidUpdate

import React, { useState, useEffect } from 'react';
const App = () => {
  let [count, setCount] = useState(100)
  const addCount = () => setCount(count + 1)
  // 模拟：componentDidMount componentDidUpdate（可以调用多次）
  useEffect(() => {
    console.log('App -- useEffect');
  })
  return (
    <div>
      <h3>App组件 --- {count}</h3>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

模拟：componentDidMount（这种写法可以模拟网络请求）

import React, { useState, useEffect } from 'react';
const App = () => {
  let [count, setCount] = useState(100)
  const addCount = () => setCount(count + 1)
  // 模拟：componentDidMount（可以调用多次）
  // 参数2：依赖项，如果为空数据，则只执行1次
  // 一般在这样的写法中，完成网络请求
  useEffect(() => {
    console.log('App -- useEffect');
  }, [])
  return (
    <div>
      <h3>App组件 --- {count}</h3>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

利用依赖项，模拟componentDidMount、componentDidUpdate

import React, { useState, useEffect } from 'react';
const App = () => {
  let [count, setCount] = useState(100)
  let [name, setName] = useState('')
  const addCount = () => setCount(count + 1)
  // 下面这种写法，也可以实现相同的功能
  // let [count, setCount] = useState({ num: 100 })
  // const addCount = () => setCount({ num: count.num + 1 })
  // const addCount = () => setCount(v => ({ num: v.num + 1 }))
  // 参数2中依赖项，进行填值,只要依赖项中的值，发生改变，则进行触发
  // componentDidMount componentDidUpdate
  useEffect(() => {
    console.log('App -- useEffect');
  // 这里的依赖项中只填了count，所以只有count发生改变，才会触发当前函数
  }, [count])
  // 对依赖项的使用，可以像下面这样分开写，也可以写在同一个数组中
  // useEffect(() => {
  //   console.log('App -- useEffect');
  // }, [name]) 
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <h3>App组件 --- {count}</h3>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

有依赖项，模拟：componentDidMount、componentDidUpdate、componentWillUnmout

import React, { useState, useEffect } from 'react';
const App = () => {
  let [count, setCount] = useState(100)
  let [name, setName] = useState('')
  const addCount = () => setCount(count + 1)
  // 有依赖项,只要count改变，则触发
  // componentDidMount componentDidUpdate componentWillUnmout
  useEffect(() => {
    console.log('App -- useEffect');
    // 返回回调函数中就是 componetWillUnMount
	// 在执行下一个 effect 之前，上一个 effect 就已被清除
    return () => {
      console.log('componentWillUnmout');
    }
  }, [count])
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <h3>App组件 --- {count}</h3>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

模拟组件销毁

import React, { useState, useEffect } from 'react';
const App = () => {
  let [count, setCount] = useState(100)
  let [name, setName] = useState('')
  const addCount = () => setCount(count + 1)
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <h3>App组件 --- {count}</h3>
      {
        count > 103 ? null : <Child />
      }
      <button onClick={addCount}>++++</button>
    </div>
  );
}
function Child() {
  // componentDidMount componentWillUnmout  -- 一般模拟组件的销毁
  useEffect(() => {
    console.log('child -- componentDidMount');
    return () => {
      console.log('child -- componentWillUnmout');
    }
  }, [])
  return (
    <div>
      <h3>Child</h3>
    </div>
  )
}
export default App;

useEffect发起网络请求

import React, { useState, useEffect } from 'react';
import { get } from '@/utils/Http'
const App = () => {
  let [films, setFilms] = useState([])
  // useEffect 
  // 在之前的版本:第1个参数要求只能是一个普通的函数，没有返回对象，可以返回回调函数，回调函数它模拟生命周期componentWillUnmout
  // 还有最后一个问题。在代码中，我们使用async / await从第三方api获取数据。如果你对async/await熟悉的话，你会知道，每个async函数都会默认返回一个隐式的promise。但是，useEffect不应该返回任何内容。这就是为什么会在控制台日志中看到以下警告：
  // Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect
  useEffect(async () => {
    let ret = await get('/api/swiper')
    setFilms(ret.data)
  }, [])
  // 如果useEffect顶层不支持 async/await可以使用如下的解决方案
  
  return (
    <div>
      <h3>App组件</h3>
      <ul>
        {
          films.map(item => (
            <li key={item.id} > {item.title}</li>
          ))
        }
      </ul>
    </div >
  );
}
export default App;

useEffect 封装网络请求：

useSwiper.js：

import { useEffect, useState } from 'react';
import { get } from '@/utils/http'
const useSwiper = (initialValue = []) => {
  let [data, setData] = useState(initialValue)
  useEffect(async () => {
    let ret = await get('/api/swiper')
    setData(ret.data)
  }, [])
  return data
}
export default useSwiper

App.jsx：

import useSwiper from "./hook/useSwiper";
const App = () => {
  let data = useSwiper()
  return (
    <div>
      <h3>App组件</h3>
      <ul>
        {
          data.map(item => (
            <li key={item.id} > {item.title}</li>
          ))
        }
      </ul>
    </div >
  );
}
export default App;

封装网络请求时，实现分页：

useGoodFood.js：

import { useEffect, useState } from 'react';
import { get } from '@/utils/http'
const useGoodFood = (initialValue = []) => {
  let [data, setData] = useState(initialValue)
  let [page, setPage] = useState(1)
  const loadData = async () => {
    let ret = await get('/api/goodfood?page=' + page)
    if (ret.data.length > 0) {
      // setData(v => [...v, ...ret.data])
      setData(ret.data)
      setPage(v => v + 1)
    }
  }
  useEffect(() => {
    loadData()
  }, [])
  return [data, loadData]
}
export default useGoodFood

App.jsx：

import useGoodFood from "./hook/useGoodFood";
const App = () => {
  let [data, loadData] = useGoodFood()
  return (
    <div>
      <h3>App组件</h3>
      <ul>
        {
          data.map(item => (
            <li key={item.id} > {item.name}</li>
          ))
        }
      </ul>
      <hr />
      <button onClick={() => {
        loadData()
      }}>下一页</button>
    </div >
  );
}
export default App;

到此这篇关于React中hook函数与useState及useEffect的使用的文章就介绍到这了,更多相关React中hook函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React中hook函数与useState及useEffect的使用

本文链接: https://www.lsjlt.com/news/168878.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React中hook函数与useState及useEffect的使用

目录1. 简介2. useState使用3. useEffect使用useEffect发起网络请求1. 简介在 React 的世界中，有容器组件和 UI 组件之分，在 React ...

99+

2024-04-02
React Hook中的useState函数的详细解析

useState => 让函数组件具有维持状态的能力useState 这个 Hook 是用来管理 state 的，它可以让函数组件具有维持状态的能力。即在一个函数组件的多次渲染...

99+

2022-11-13

React Hook useState函数 React Hook
React函数式组件Hook中的useEffect函数的详细解析

目录前言useEffect的作用useEffect的使用？1.class组件2.函数式组件总结前言 React函数式编程没有生命周期，因此需要借助useEffect来实现。 useE...

99+

2022-11-13

React useEffect React hooks useEffect React 函数式组件useEffect
React函数式组件Hook中的useState函数的详细解析

目录前言一、什么是函数式组件二、useState前言公司项目需要使用react，而函数式组件也是官方比较推荐的！！！所以学习hooks是很重要的。一、什么是函数式组件纯函数组件...

99+

2022-11-13

React Hook useState函数 React函数式组件useState
React-Hook中使用useEffect清除定时器的实现方法

目录useEffectuseEffect清除定时器最后useEffect 之前我们学习了class组件的声明周期，那么我们想在函数式组件中做一些声明周期有关操作能否实现呢？函数式组件...

99+

2022-11-13

react Hook useEffect清除定时器 react Hook定时器 react Hook useEffect使用
浅析React Hook中useEffecfa函数的使用

我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更...

99+

2022-11-22

React Hook React
React Hook中useEffecfa函数如何使用

这篇文章主要介绍“React Hook中useEffecfa函数如何使用”，在日常操作中，相信很多人在React Hook中useEffecfa函数如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Rea...

99+

2023-07-04
React useEffect的理解与使用

目录避免重复循环渲染关于副作用的清除 React16.8新增的useEffec这个hook函数就是处理副作用的。所谓的“副作用”，举个通俗一点的例子，假如感冒了本来吃点药就没事了...

99+

2024-04-02
React Hook中的useEffecfa函数的使用小结

目录useEffect的详细解析useEffecf基本使用清除副作用(Effect)使用多个useEffectuseEffect性能优化useEffect的详细解析 useEffec...

99+

2022-11-13

React Hook useEffecfa函数 React Hook用法 React useEffecfa函数
react中使用usestate踩坑及解决

目录usestate的常规用法useState遇到的坑1、useState不适合复杂对象的更改2、useState异步回调的问题3、根据hook的规则,使用useState的位置有限...

99+

2022-11-13

react使用usestate usestate踩坑 react中usestate
react中使用useEffect及踩坑记录

目录使用useEffect及踩坑记录useEffect 介绍useEffect常见跳坑hooks中useEffect()使用总结常见使用useEffect() 的第二个参数说明use...

99+

2022-11-13

react使用useEffect useEffect踩坑使用useEffect踩坑
React新扩展函数setState与lazyLoad及hook介绍

目录1.setState的两种写法2.lazyLoad3.Hook钩子函数1.setState的两种写法 ①setState(对象,[callback]) ②setState(函数,...

99+

2022-12-21

React setState React lazyLoad React hook
React-hooks中的useEffect使用步骤

目录1.理解函数副作用什么是副作用常见的副作用2.基础使用使用步骤示例代码3.依赖项控制useEffect 永远是在 DOM渲染完成之后执行 1.理解函数副作用什么是副作用对于R...

99+

2024-04-02
React中的setState/useState怎么使用

这篇文章主要介绍“React中的setState/useState怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React中的setState/useState怎么使用”文章能帮助大家解决问...

99+

2023-07-05
React中useEffect与生命周期钩子函数的对应关系说明

目录React useEffect与生命周期钩子函数的对应关系使用格式一：不带参数的情况使用格式二：带第二个参数，参数为空数组使用格式三：带第二个参数，并且指定了依赖项使用格式四：依...

99+

2024-04-02
React中10种Hook的使用介绍

目录React Hook是什么？ React目前提供的Hook 1.useState 2.useEffect & useLayoutEffect 3.useMemo &...

99+

2024-04-02
react中常见hook的使用方式

目录1、什么是hook？ 2、为什么要出现hook？ 3、有哪些常用的hook？ (1) useState (2) useEffect (3) useContext (4) useR...

99+

2024-04-02
React中10种Hook的使用方法

本篇文章给大家分享的是有关React中10种Hook的使用方法，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。React Hook是什么？React官网是这么介绍的： Hook ...

99+

2023-06-25
python强大的hook函数使用及应用场景

目录什么是hook？hook应用场景（一）requests 使用hookmitmproxy 中的hook自己实现hookhook应用场景(二)实现动态调用hook什么是hook？钩...

99+

2023-05-19

python hook函数使用 python hook
React中setState/useState的使用方法详细介绍

目录一、React如何使用setState/useState的最新的值A.使用setState的最新的值B.使用useState的最新的值二、React中setState/useSt...

99+

2023-05-14

React setState与useState React setState React useState