React16.8新增特性Hooks--概念理解

最新推荐文章于 2024-04-03 17:38:57 发布
最新推荐文章于 2024-04-03 17:38:57 发布
阅读量1k 收藏 2
点赞数
分类专栏： React学习 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54088431/article/details/126808534
版权

1.Hooks概念理解

1. 什么是hooks

让你在不编写class的情况下使用state以及其他的React特性。

Hooks的本质：一套能够使函数组件更强大，更灵活的“钩子”

React体系里组件分为 类组件 和 函数组件

函数组件是有利于逻辑拆分与重用的组件表达形式。而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生。

注意点：

  1. 有了hooks之后，为了兼容老版本，class类组件并没有被移除，都可以使用
  2. 有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态
  3. hooks只能在函数组件中使用

2.Hooks解决了什么问题

Hooks的出现解决了2个问题 1. 组件的状态逻辑复用 2.class组件自身的问题

  1. 组件的逻辑复用

    在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式，但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等

  2. class组件自身的问题

    class组件大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的组件。

3. Hooks优势

  1. 告别难以理解的class
  2. 解决业务逻辑难以拆分的问题
  3. 使状态逻辑复用变得更加简单
  4. 函数组件在设计思想上，更加契合React的理念
  5. 一套能够使函数组件更强大，更灵活的“钩子”

2.useState

1.基础使用

1.作用：

​ useState为函数组件提供状态（state）。

2.使用步骤：

  1. 导入 useState 函数·
  2. 调用 useState 函数，并传入状态的初始值（必须在函数组件中）
  3. 从useState函数的返回值中，拿到状态和修改状态的方法
  4. 在JSX中展示状态
  5. 调用修改状态的方法更新状态

3.代码实现：

返回值为：当前state以及更新state的函数 

import { useState } from 'react'

function App() {
  // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
  // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

点击按钮后，会看见state改变 

总结：

  •  允许你在React函数组件中添加state的Hook。
  •  返回值为：包含当前state以及更新state的函数的数组。
  •  const [count, setCount] = useState(0)  
  •  count是state变量，接受0；用来初始化state
  •  首次渲染，将初始值给到count；后续只要调用了setCount，就会将最新值给到count
  •  setCount是改变state的函数，只要调用setCount一次，整个App中的代码都会执行
  • useState函数可以执行多次，每调用一次为函数组件提供一个状态
  •  注意：整个只能在函数组件中使用

2. 状态的读取和修改

1.读取状态

​ 该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用

2.修改状态

  1. setCount是一个函数，参数表示最新的状态值
  2. 调用该函数后，将使用新值替换旧值
  3. 修改状态后，由于状态发生变化，会引起视图变化

3.代码实现：

1.userState传过来的参数，作为count的初始值

2.[count,setCount]:是一个解构赋值，useState返回值是一个数组

3.名字可以自定义，保持语义化

4.顺序不可以换，第一参数是数据状态，第二参数是修改数据的方法

5.setCount函数：用来修改count，依然保持不能直接修改原值，还是生成一个新值替换原值

setCount(基于原值计算得到的新值)

6.count和setCount是一对：是绑在一起的setCount只能用于修改对应的count值

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

注意事项：

​ 修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型

3.组件的更新过程

函数组件使用 useState hook 后的执行过程，以及状态值的变化

  • 组件第一次渲染
    1. 从头开始执行该组件中的代码逻辑
    2. 调用 useState(0) 将传入的参数作为状态初始值，即：0
    3. 渲染组件，此时，获取到的状态 count 值为： 0
  • 组件第二次渲染
    1. 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
    2. 组件重新渲染时，会再次执行该组件中的代码逻辑
    3. 再次调用 useState(0)，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
    4. 再次渲染组件，此时，获取到的状态 count 值为：1

注意：useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值

import { useState } from 'react'
// 首次渲染：组件内部的代码会被执行一次
// 更新渲染：setCount都会更新：
// 1.app组件会再次渲染，这个函数会再次执行
// 2.useState再次执行，得到的是新的count值，不是0，而是修改后的1
// 模板会用新值渲染
function App() {
  // count：数据状态
  // setCount：修改count的函数（专有函数）
  const [count, setCount] = useState(0)
  // 在这里可以进行打印测试
  console.log(count)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

4. 使用规则

1.useState函数可以执行多次

每次执行互相独立，每调用一次为函数组件提供一个状态

function List(){
  // 以字符串为初始值
  const [name, setName] = useState('cp')
  // 以数组为初始值
  const [list,setList] = useState([])
}

2.useState注意事项

1.只能出现在函数组件中

2.不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）

//错误写法
let num = 1
function List(){
  num++
  if(num / 2 === 0){
     const [name, setName] = useState('cp') 
  }
  const [list,setList] = useState([])
}
// 俩个hook的顺序不是固定的，这是不可以的！！！

3.可以通过开发者工具component查看hooks状态

4.只能在React的函数组件中调用Hook，不要在其他的js函数中调用（还有自定义Hook可以调用Hook）

3.useEffect

1. 理解函数副作用

1.什么是副作用

  • ​副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。
  • 对于 React 组件来说，主作用就是根据数据（state/props）去渲染 UI，除此之外都是副作用（比如：数据获取，订阅或者手动修改 DOM）

2.常见的副作用

  1. 数据请求 ajax发送
  2. 手动修改dom
  3. localstorage操作

3.Effect Hook

useEffect函数的作用就是为react函数组件提供副作用处理的。

  • useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。
  • 它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

2. 基础使用

1.作用

​ 为react函数组件提供副作用处理

2.使用步骤

  1. 导入 useEffect 函数
  2. 调用 useEffect 函数，并传入回调函数
  3. 在回调函数中编写副作用处理（dom操作）
  4. 修改数据状态（当我们通过修改状态更新组件时，副组件也会不断执行）
  5. 检测副作用是否生效

3.代码实现

在修改数据后，把count值放到页面标题中 

import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
 
  useEffect(()=>{
    // dom操作
    // 定义副作用
    document.title = `当前已点击了${count}次`
    document.title=count
  })
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}

export default App

案例：

定义state变量count，让页面的标题为count，并且随着count一起变化 

使用类组件 

class App extends React.Component {
  state = { count: 0 }
  changeCount = () => {
    this.setState({ count: this.state.count + 1 })
  }
  componentDidMount () {
    document.title = this.state.count
  }
  componentDidUpdate () {
    document.title = this.state.count
  }
  render () {
    return (
      <div>
        <h2>{this.state.count}</h2>
        <button onClick={this.changeCount}>count+1</button>
      </div>
)}}

点击+1后，页面的值变了，但是页面标题没有改变。跟生命周期有关 ，因为生命周期只会执行一次，在页面渲染完毕后，componentDidMount会执行一次，然后就不会执行了，标题就一直等于0

 

 

 所以，在页面改变后，还要触发一个生命周期函数componentDidUpdate

//当页面发生更新后，就会触发这个生命函数
componentDidUpdate () {
    document.title = this.state.count
}

在class中，需要在两个生命周期函数中编写重复的代码， 会臃肿。

使用函数组件  

import { useEffect, useState } from 'react'

function App () {
  const [count, setCount] = useState(0)
//组件在首次渲染的时候执行一次
//当组件修改状态更新组件的时候，副作用不断执行
  useEffect(() => {
    console.log(111)
    // 定义副作用
    document.title = count
  })
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => { setCount(count + 1) }}>{count}</button>
    </div>
)}

会执行两次，因为  <React.StrictMode>，会执行完一次后，在执行一次，用来检查组件的语法

页面首次渲染执行一次，然后每次更新都会执行。 

3.依赖项控制执行时机

  • useEffect--> 告诉 React 组件需要在渲染后执行某些操作。
  • React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。
  • Hook使用了js的闭包机制

1. 不添加依赖项

组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行

  1. 组件初始渲染
  2. 组件更新 （不管是哪个状态引起的更新）
useEffect(()=>{
    console.log('副作用执行了')
})
  • 不添加依赖项：首次渲染的时候执行一次，更新状态的时候不断执行。 

2. 添加空数组

组件只在首次渲染时执行一次。

useEffect(()=>{
     console.log('副作用执行了')
},[])
  • 第二个参数依赖项 [ ]：控制执行时机。
  • 依赖项为空数组，则只有首次页面渲染的时候执行一次。

3. 添加特定依赖项

副作用函数在首次渲染时执行，在依赖项发生变化时重新执行

添加特定依赖项， 依赖项改变多少次，则执行多少次。
 

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 
    
    useEffect(() => {    
        console.log('副作用执行了')  
    }, [count])  
    
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

注意事项

useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

// 有count和name，所以都要添加到依赖项数组中
useEffect(() => {
        // dom操作
        // 定义副作用
        document.title = `当前已点击了${count}次`
        document.title = count
        console.log(name)

    }, [count, name])
    // 此时：初始化+count/name被修改时都会执行副作用函数

某种意义上，hook的出现，就是想不用生命周期概念也可以写业务代码

总结：

依赖项：控制副作用的执行时机
1.默认状态(无依赖项)
组件初始化时，先执行一次，等到每次数据修改组件更新再次执行（后续组件更新几次执行几次）
2.添加一个空数组依赖项
组件初始化的时候，执行一次，后续不再执行。
3.依赖特定项
组件初始化时，执行一次，依赖的特定项发送变化会再次执行 （后续依赖项改变几次执行几次）

阶段小练习 - 自定义hook

需求描述**：自定义一个hook函数，实现获取滚动距离Y

const [y] = useWindowScroll()

1.创建hooks/useWindowScroll.js,填入以下内容

import { useState } from "react"

export function useWindowScroll () {
  // geuy赋值，有固定的写法：setY
  const [y, setY] = useState(0)
  // 在滚动行为发生时，不断获取滚动值，然后交给y
  window.addEventListener('scroll', () => {
    const h = document.documentElement.scrollTop
    setY(h)
  })
  return [y]
}

2.在App.js中使用此函数

import { useWindowScroll } from './hooks/useWindowSroll'

function App () {
    const [y] = useWindowScroll()
    return (
        <div style={{ height: '12000px' }}>
            {y}
        </div>
    )
}

export default App

需求描述： 自定义hook函数，可以自动同步到本地LocalStorage

const [message, setMessage] = useLocalStorage(key，defaultValue)

  1. message可以通过自定义传入默认初始值
  2. 每次修改message数据的时候 都会自动往本地同步一份

1.创建useLocalStorage.js

import { useEffect, useState } from 'react'

export function useLocalStorage (key, defaultValue) {
  const [message, setMessage] = useState(defaultValue)
  // 每次只要message变化 就会自动同步到本地ls
  useEffect(() => {
     // 当数据变化时，往里面存入一份
    window.localStorage.setItem(key, message)
  }, [message, key])
  return [message, setMessage]
}

2.导入到App.js中使用

import { useWindowScroll } from './hooks/useWindowSroll'
import { useLocalStorage } from './hooks/useLocalStorage'
function App () {
    const [y] = useWindowScroll()
    const [message, setMessage] = useLocalStorage('hook-key', 'zz')
    // 5秒后。从zz变成cp->Application的Key
    setTimeout(() => {
        setMessage('cp')
    }, 5000)
    return (
        <div style={{ height: '12000px' }}>
            {y}
            {message}
        </div>
    )
}

export default App
格鲁的斯图尔特
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 18已经发布，新特性一览，带你快速了解。
FarmerLZJ的专栏
04-05 5845
React 18发布，带来一些行的 API 特性，本文带你一览新特性。
react-hooks-demo：此应用程序演示了React 16.8 Hooks的用法以及有关其各种用例的注释
02-14
Hook是React的一个相当新的概念，它是在React 16.8版本中引入的。 借助Hooks，现在可以仅使用功能组件来构建React应用程序。 这意味着现在可以引入我们都喜欢功能组件的类组件的功能。 本质上，借助Hooks，我们可以 ...
React 16.8 新特性：让你的应用更出色(上)
你若盛开，清风自来
12-27 1031
useState是 React 中的一个 Hook，用于在函数组件中添加和管理状态。它允许你在函数组件中定义状态变量，并提供了一种简单的方式来更新这些状态。下面是一个使用useState// 创建一个状态变量 count，初始值为 0// 使用 setCount 方法将 count 的值加 1return (在上述示例中，我们使用useState创建了一个名为count的状态变量，并通过setCount方法来更新它。setCount。
react-redux 基础及新增 Hooks API —— useSelecter(), useStore(), useDispatch() 使用技巧
赵花花的博客
02-14 1620
你今年被毕业了吗
React19 新特性 – 附带代码示例的更新
最新发布
晓风晓浪
04-03 2660
🤖 React 编译器：React 正在努力实现一个新的编译器。目前，Instagram 已经在利用这项技术，它将在未来版本的 React 中发布。🔥 服务器组件：经过多年的开发，React 引入了服务器组件的概念。您现在可以在 Next.js 中使用此功能。💪 动作：动作还将彻底改变我们与 DOM 元素的交互方式。🌇 文档元数据：另一个急需改进的方面即将到来，使开发人员能够用更少的代码实现更多功能。💼 资源加载：这将使资源能够在后台加载，从而改善应用程序的加载时间和用户体验。
React16.8的新增特性，Hook讲解
passerma的博客
06-07 551
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 1.useState 用来声明state变量，类似于class里的this.state，使用方法如下 export default function Example() { // useState() 方法里面唯一的参数就是初始 state，可以是数字或字符串或对象 // 这一步设置了count的初始值为0 // setCount为修改cou.
react 16新特性介绍
m_review的博客
05-17 1285
目录 React v16.0 （2017 年 9 月） render 支持返回数组和字符串 错误边界 componentDidCatch Fiber React v16.2 （2017 年 11 月） Fragment React v16.3 （2018 年 3 月） Context 创建 Ref 使用回调函数 或者 createRef 组件的生命周期 React v16.4 ...
react-hooks-lib:一组可重复使用的React Hooks
04-23
安装npm i react-hooks-lib --save 例子参观钩子名称争论退货生命周期 F -- F -- f，条件--状态 最初的{ContextProvider，ContextConsumer，set，useSelector，useSet} 最初的{GlobalProvider，GlobalConsumer，set...
react-lifecycles-hooks-example:React类方法与Hooks方法的示例
03-10
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。npm run eject 注意：这是单向操作。 eject ，...
mobx-react-lite：基于React 16.8和Hooks的MobX轻量级React绑定
02-05
MobxReact轻 :police_car_light: :police_car_light: :police_car_light: 此已移至 ...mobx-react-lite需要React 16.8或更高版本。 用户指南 :backhand_index_pointing_right: API参考 :hammer_and_pick: ob
react-hooks-redux-registration-login-example：React Hooks + Redux-用户注册和登录教程及示例
02-05
react-hooks-redux-registration-login-example React Hooks + Redux-用户注册和登录教程及示例 有关文档和现场演示，请参阅
react新特性hooks使用详细教程
weixin_34220179的博客
06-12 1619
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 为什么使用hooks? 在组件之间复用状态逻辑很难,可能要用到render props和高阶组件，React 需要为共享状态逻辑提供更好的原生途径，Hook 使你在无需修改组件结构的情况下复用状态逻辑 复杂组件变得难以理解，Hook 将组件中相互关联的部分拆分...
React 新特性React Hooks
w972036796的博客
08-19 270
你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？——拥有了Hooks，生命周期钩子函数可以先丢一边了。 你在还在为组件中的this指向而晕头转向吗？——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对thi...
react 数组新增_React 新特性 Hooks 讲解及实例(二)
weixin_29586681的博客
01-24 667
本文是React新特性系列的第二篇，第一篇请点击这里：React 新特性讲解及实例什么是 HooksHook 是 React 16.8 的新增特性。它可以让你在不编写 类组件 的情况下使用 state以及其他的 React 特性。类组件的不足状态逻辑复用难缺少复用机制渲染属性和高阶组件导致层级冗余趋向复杂难以维护生命周期函数混杂不相干逻辑相干逻辑分散在不同生命周期this 指向困扰内...
React_外部hooks及框架
qq_22167557的博客
11-18 203
React 数据请求 reactquery 这是一个适用于react hooks的请求库。 这个库将帮助你获取、同步、更新和缓存你的远程数据 useQuery（查） 知乎链接 封装 import { useQuery } from 'react-query'; import { useClient } from 'contexts'; function useAllJobsQuery() { const client = useClient(); return useQuery('allJobs'
React 16 新特性全解（上）
frontend_frank的博客
07-09 387
本次系列分上下两篇文章，上主要介绍从v16.0~ 16.4的新特性，下主要介绍16.5~16.8。下面就开始吧~本篇文章较长预计需要15min（当然主要是因为demo太多...
React 16.8 版本: 带 Hooks 的版本
weixin_33872660的博客
02-18 1752
原文作者：Dan Abramov 译者：UC 国际研发 Jothy写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。随着 React 发布 16.8 版本，React Hooks 也发布稳定版本啦！什么是 Hooks?Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 Re...
React16.8搭建支持Less文件的开发环境
QY的博客
03-11 1823
React 版本 16.8.4 写这篇文章是因为个人想使用蚂蚁金服的AntD UI写个demo，中间遇到一些坑，网上找到的一些方案有点过时，所以解决问题后决定自己写点经验和大家分享。 当前最新React版本是16.8.4. 使用create-react-app脚手架工具创建一个名为 ant-react 的项目： 项目创建完成后可以看到项目结构很精简，没有发现webpack配置文件。之后我们打开p...
react16.8版本新增的钩子函数有什么作用
04-25
React 16.8版本新增的钩子函数是"Hooks"，它们的作用是提供了一种在函数组件中使用状态和其他React特性的方法。使用Hooks可以使得函数组件具有类组件相同的功能，比如状态管理、生命周期管理等，而且使用起来更加简单和灵活。Hooks的使用可以极大地提高React应用的开发效率。其中一些常用的钩子函数包括useState、useEffect、useContext、useReducer等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值