React Hooks 学习 - 02 useState、useReducer、useContext、useEffect

最新推荐文章于 2023-01-04 14:57:30 发布
最新推荐文章于 2023-01-04 14:57:30 发布
阅读量932 收藏 1
点赞数 1
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/116921549
版权

useState 钩子函数

介绍

用于为函数组件引入状态。

通常情况下，函数中的变量在函数执行完就会被释放掉，useState 方法通过闭包（将数据存储在组件函数外）让函数型组件实现保存和变更状态。

useState 接收一个初始状态的值作为参数，返回一个数组，数组的第一个元素是状态数据，第二个元素是设置状态数据的方法，该方法接收一个参数用于修改状态数据。

可以通过数组解构的方式将数组中的元素解构出来。

组件重新渲染时，useState 会获取状态的值，忽略设置的初始值。

使用

import { useState } from 'react'

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

export default App

useState 使用细节

  1. 接收唯一的参数，即状态初始值，初始值可以是任意数据类型
  2. 返回值为数组，数组中存储状态值和更改状态值的方法，方法名称约定以set开头，后面加上状态名称
  3. 方法可以被调用多次，用于保存不同状态值
  4. 参数可以是一个函数，函数返回什么，初始状态就是什么，函数只会被调用一次，用在初始值是动态值得情况
// 参数是函数的场景，优先取组件接收的数据，这样只会在挂载时获取一次 props 中的数据
function App(props) {
  // 错误写法：每次渲染都会获取 props.count
  // const propCount = props.count
  // const [count, setCount] = useState(propCount || 0)
  
  // 正确写法：只会在挂载时执行一次
  const [count, setCount] = useState(() => {
    return props.count || 0
  })
  return <div>
    <span>{count}</span>
    <button onClick={() => setCount(count+1)}>+ 1</button>
  </div>
}

设置状态值方法的使用细节

  • 接收唯一的参数参数可以是一个值也可以是一个回调函数
  • 参数即新的状态值或返回新的状态值的函数，它会完全替换状态值，不会像 setState一样合并对象类型的状态值。
  • 方法本身是异步的，若要同步执行一些业务，业务代码要写在回调函数参数内。
import { useState } from 'react'

function App(props) {
  const [count, setCount] = useState(() => {
    return props.count || 0
  })

  function handlePower(number) {
    setCount(() => {
      const power = number * number

      // 同步代码在 setCount 参数内定义
      // document.title = count

      return power
    })

    // count 为 setCount 执行前的值
    document.title = count
  }
  return <div>
    <span>{count}</span>
    <button onClick={() => setCount(count+1)}>+ 1</button>
    <button onClick={() => handlePower(count)}>求平方</button>
  </div>
}

export default App

useReducer 钩子函数

介绍

useState 的替代方案，是另一种让函数组件引入状态的方式。

useReducer 的方式类似 Redux，组件的状态被保存在特定的地方，要想改变状态，需要通过 dispatch 方法触发一个 Action，这个 Action 会被 Reducer 函数接收，Reducer 内部要根据 Action 的类型决定如何处理状态，最后通过返回值的方式更新状态。

使用

useReducer 方法的参数：

  • 第一个参数：接收一个形如(state, action) => newState 的 Reducer 函数
  • 第二个参数：默认的状态初始值

返回：当前的 state 和配套的 dispatch 方法。

import { useReducer } from 'react'

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}

function App() {
  const [count, dispatch ] = useReducer(reducer, 0)

  return <div>
    <span>{count}</span>
    <button onClick={() => dispatch({type: 'increment'})}>+ 1</button>
    <button onClick={() => dispatch({type: 'decrement'})}>- 1</button>
  </div>
}

export default App

相对于 useState 的好处

  • 对逻辑较复杂且包含多个子值的 state，使用 useReducer 方便根据 Action 的类型修改部分数据。
  • 适合下一个 state 依赖上一个 state 的场景
  • 给那些会触发深更新的组件做性能优化
    • 可以向下级组件传递 dispatch 方法，而不是组件内定义的函数
    • 这样当组件重新渲染时，如果传给下级组件的状态未发生变化，下级组件就不会重新渲染
    • 因为dispatch的引用是固定的，而组件内定义的函数在组件重新渲染时被重新定义，因此也会触发下级组件的渲染

useContext 钩子函数

在使用 createContext 跨组件层级传递数据时，简化获取数据的代码。

useContext 接收一个 context 对象（React.createContext 的返回值），返回该 context 的当前值。

调用了 useContext 的组件总会在 context 值变化时重新渲染。

context 类组件 static 使用

import React, { createContext } from 'react'

const ThemeContext = createContext()

class Foo extends React.Component {
  static contextType = ThemeContext

  render() {
    return <div>{ this.context }</div>
  }
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Foo />
    </ThemeContext.Provider>
  )
}

export default App

Consumer 嵌套组件使用

import { createContext } from 'react'

const ThemeContext = createContext()

function Foo() {
  return <ThemeContext.Consumer>
    {
      theme => <div>{ theme }</div>
    }
  </ThemeContext.Consumer>
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Foo />
    </ThemeContext.Provider>
  )
}

export default App

useContext 使用

使函数型组件中不适用组件嵌套（Consumer）就可以订阅 Context。

import { createContext, useContext } from 'react'

const ThemeContext = createContext()

function Foo() {
  const theme = useContext(ThemeContext)
  return <div>{ theme }</div>
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Foo />
    </ThemeContext.Provider>
  )
}

export default App

useEffect 钩子函数

介绍

让函数型组件拥有处理副作用的能力，类似生命周期函数。

  • 在类组件中使用生命周期函数处理副作用。
  • 在函数型组件中使用 useEffect处理副作用。

useEffect 执行时机

useEffect可以看作 componentDidMount、componentDidUpdate 和 componentWillUnmount 三个函数的组合：

  • useEffect(() => {}) ==> componetDidMount, componentDidUpdate
    • 当组件挂载完成和状态更新完成时会调用传入的函数
  • useEffect(() => {}, []) ==> componetDidMount
    • 第二个参数接收一个数组，用于指定监听的状态，当组件挂载完成和指定的状态变更完成时执行传入的函数
    • 如果第二个参数是空数组，表示没有要监听的状态，则只会在挂载完成时执行一次
  • useEffect(() => () => {}) ==> componetWillUnmount
    • 传入的函数如果返回了一个回调函数，组件更新前和被卸载前会执行这个回调函数
    • 这个函数用于清理上一个副作用，以保证一致性（避免上一个副作用的效果残留）

当组件重新渲染时，useEffect 会用新的副作用函数替换之前的副作用函数。

使用

import { useState, useEffect } from 'react'
import ReactDom from 'react-dom'

function Foo(props) {
  useEffect(() => {
    console.log('1. 组件挂载完成和状态更新完成时执行')
  })

  useEffect(() => {
    console.log('2. 仅在组件挂载完成时执行一次')
  }, [])

  useEffect(() => {
    return () => {
      console.log('3. 在组件更新前和卸载前执行', 'count: '+ count)
    }
  })

  return <div>{props.count}</div>
}

function App(props) {
  const [count, setCount] = useState(0)

  return <div>
    <Foo count={count} />
    <button onClick={() => setCount(count+1)}>+ 1</button>
    <button onClick={() => ReactDom.unmountComponentAtNode(document.getElementById('root'))}>卸载组件</button>
  </div>
}

export default App

ReactDom.unmountComponentAtNode(container) 用于卸载容器中渲染的组件。

示例

  1. 为 window 对象添加滚动事件
  2. 设置定时器，让 count 数值每秒 +1

index.html 文件中给 body 添加高度：

<body style="height: 2000px;">
  <div id="root"></div>
</body>

import { useState, useEffect } from 'react'
import ReactDom from 'react-dom'

function App() {
  function onScroll() {
    console.log('页面滚动了')
  }

  useEffect(() => {
    window.addEventListener('scroll', onScroll)

    return () => {
      window.removeEventListener('scroll', onScroll)
    }
  }, [])

  const [count, setCount] = useState(0)

  useEffect(() => {
    const timerId = setInterval(() => {
      // 这里需使用函数，将 count 作为参数传入，否则数值只会更新一次
      setCount(count => {
        document.title = count + 1
        return count + 1
      })

    }, 1000)

    return () => {
      clearInterval(timerId)
    }
  }, [])

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => ReactDom.unmountComponentAtNode(document.getElementById('root'))}>卸载组件</button>
    </div>
  );
}

export default App;

在处理副作用上 useEffect 相比类组件的优势

  1. 按照用途将代码进行分类
    • 由于 useEffect 可以被多次调用，所以将一组相干的业务逻辑归置到同一个副作用函数中，将不相干的业务逻辑分置到不同的副作用函数中
  2. 简化重复代码，使组件内部代码更加清晰
    • 例如避免在 componentDidMount 和 componentDidUpdate 中编写重复代码

useEffect 的第二个参数

useEffect 的第二个参数是依赖项数组，作用是：只有指定数据发生变化时才会触发副作用（effect）。

  • 当不传递依赖项数组的时候，会在组件数据（所有）发生变化的时候触发副作用函数。
  • 如果传递一个空数组，则只会在初始加载时执行副作用函数，不会监听任何数据的变化。

原理是接收一个给定值的数组，组件每次渲染，用新的数组和旧的数组去对比，有任何一项不相等则执行副作用。

import { useState, useEffect } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const [person, setPerson] = useState({name:'张三'})

  useEffect(() => {
    console.log('只有当 count 变化时才会执行回调函数')
    document.title = count
  }, [count])

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+ 1</button>
      <br/>
      <span>{person.name}</span>
      <button onClick={() => setPerson({name: '李四'})}>更名</button>
    </div>
  );
}

export default App;

异步操作

使用 await async 关键字

在 useEffect 回调函数中执行异步操作，例如：

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    getData().then(result => {
      console.log(result)
    })
  }, [])

  return (
    <div>App</div>
  );
}

// 模拟的异步操作
function getData() {
  return new Promise(resolve => {
    resolve({msg: 'Hello Async'})
  })
}

export default App;

如果想使用await关键字，则需要添加 async关键字：

useEffect(() => {
  const asyncFn = async () => {
    const result = await getData()
    console.log(result)
  }
  asyncFn()
}, [])

但是这样写，会出现问题：

# 在 React 16 中会报错打断运行（Error）
An effect function must not return anything besides a function, which is used for clean-up.
It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately：<推荐写法>
# 副作用函数必须返回一个用于清理的普通函数。
# 看起来你编写了 useEffect(async () => ...) 或返回了一个 Promise。相反，你可以在副作用函数中编写异步函数，并立即调用它：<推荐写法>

# 在 React 17 中会警告（Warning）
Effect callbacks are synchronous to prevent race conditions. Put the async function inside：<推荐写法>
# 为了防止竞态条件（异步创建的任务无法确定执行顺序），副作用回调函数都是同步的。将异步函数像这样写入：<推荐写法>

错误原因

How to fetch data with React Hooks?

如控制台提示的，副作用函数必须返回一个用做清理资源（组件销毁时调用）的普通函数。

如果使用 async 关键字声明函数，则会声明一个异步函数，异步函数会返回一个 Pormise，副作用函数返回 Promise，违反了使用规则。

React 17 这种写法虽然不会阻塞程序，但也不建议这样使用。

推荐写法

如官方推荐的写法，在普通函数中执行异步操作，将普通函数传给 useEffect。

useEffect(() => {
  const asyncFn = async () => {
    const result = await getData()
    console.log(result)
  }
  asyncFn()
}, [])

或在自执行函数中执行：

useEffect(() => {
  (async () => {
    const result = await getData()
    console.log(result)
  })()
}, [])
皮蛋很白
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
React Hook之useState、useReducer的使用和源码分析
haoyanyu_的博客
05-25 1301
React Hook 16.8以前 一般使用类组件或者函数组件； 前者有完整的生命周期API，可以管理组件状态，但是this指向在使用时需要格外注意一；一般通过HOC实现复用；通过shouldComponentUpdate()或者PureComponent组件进行性能优化，防止不必要的更新。 后者是函数组件，一般是传入的数据进行展示，没有生命周期，只有props,是无状态组件； 16.8以后 新增了React Hook特性，它是函数组件，但是通过hook钩子可以管理内部状态，而且可以调用生命周期；通过钩子的
React源码分析(三)：useState，useReducer
It_kc的博客
11-28 247
总结下useState初始化和setStateuseState会在第一次执行函数组件时进行初始化，返回。当我们通过setState也就是进行调度更新时，会创建一个update加入到hook.queue中。当更新过程中再次执行函数组件，也会调用useState方法，此时的useState内部会使用更新时的hooks。通过获取到创建的update。在通过遍历update链表完成setState合并。返回update后的.
React Hooks常用的钩子useState、useContext、useReducer、useEffect的用法
雷佳佳的博客
09-23 1840
React 是主流的前端框架，v16.8 版本引入了全新的 API，叫做 React Hooks，颠覆了以前的用法。 一、class 组件的缺点 class 组件写发 import React, { Component } from "react"; export default class Button extends Component { constructor() { supe...
react——useState和useReducer
m0_55173487的博客
01-04 704
useState和useReducer都是用来存储和更新state，useReducer状态管理是useState的升级版。useReducer可以在外部存储变量，实现异步操作。若要实现跨组件通信，需要结合useContext来实现
react-hooks-in-action-code
05-23
主要的React Hooks包括useState、useEffect、useContext、useReducer、useRef、useCallback、useMemo和useImperativeHandle等。 1. **useState**: 这个Hook让我们在函数组件中添加状态。它接受一个初始值，并返回一...
react-hooks-testing-complete:常用的 React 测试场景列表。 包括如何使用 Mocks 测试 useState、useReducer、useContext、表单提交、API 请求。 Cypress E2E 测试和 Travis CI 测试
05-30
在React开发中，React Hooks是现代JavaScript环境下的一个重要特性，它们极大地...通过深入学习和实践“react-hooks-testing-complete”提供的测试策略和示例，开发者将能够自信地构建和维护可靠的React Hooks应用。
awesome-react-hooks：关于React Hooks的精选列表
01-31
"awesome-react-hooks" 是一个精心整理的React Hooks资源列表，旨在为开发者提供一个全面了解和学习React Hooks的平台。 这个列表可能包括但不限于以下几类内容： 1. **基本Hooks**： - useState：用于在函数组件...
React-hooks-basic:学习React-hooks基础
03-18
除了这些基本的Hooks，React还提供了其他有用的Hooks，如`useContext`用于访问和订阅Context，`useReducer`用于复杂的状态管理，`useRef`用于保存任何可变的值，`useCallback`和`useMemo`用于性能优化，以及自定义...
react-学习高级ReactHooks研讨会
08-15
React Hooks的核心包括useState、useEffect、useContext、useReducer、useCallback、useMemo等，它们改变了我们编写无状态组件和管理副作用的方式。首先，useState是一个用于在函数组件中添加状态的Hook，它返回一对...
react Hooks之useReducer
qq_44718039的博客
06-15 210
react Hooks之useReducer
React hooks之useState,useReducer,useEffect原理分析
weixin_40863414的博客
07-01 849
React hooks用了这么久了，没有仔细了解过内部原理，网上好多文章讲的都不清楚，最近花了一些时间，整理了一下常见hooks的内部原理。 文章地址： React hooks之useState,useReducer,useEffect原理分析
带你深入了解 useState
趣谈前端
03-09 1924
大厂技术坚持周更精选好文为什么 react 16 之前的函数组件没有状态？众所周知，函数组件在 react 16 之前是没有状态的，组件状态只能通过props进行传递。写两个简...
【译】在 React Hooks 中使用 useReducer 的几种用例
weixin_34148508的博客
04-13 887
原文：How to use useReducer in React Hooks for performance optimization github 的地址 欢迎 star! React Hook 出来已经有一段时间了，具体的一些用法以及它解决的痛点，可以查看 Dan 的两篇文章 useEffect 完整指南以及编写有弹性的组件进行详细了解。 本文主要是介绍了6种在 React Hooks...
react中的hooks、state、闭包和usereducer，react中使用websocket
MFWSCQ的博客
09-25 2141
对于那些来自Redux背景的人来说，useReducer看起来似乎复杂而不必要。在useState和上下文之间，很容易陷入这样的陷阱：对于大多数较简单的用例，Reducer会增加不必要的复杂性。但是，事实证明useReducer可以大大简化状态管理。让我们看一个例子。 与我的其他帖子一样，此代码来自我的书目项目。用例是屏幕允许用户扫描书籍。记录ISBN，然后将其发送到一个查找图书信息的限速服务。...
React学习总结part2：react-hooks的useState，useContext ，useReducer，useEffect
Super Livia
11-02 305
useState useState的优点：便于管理数据的状态，多次声明状态的方式更加方便 useState的缺点：处理多层嵌套数据逻辑，比较吃力 index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Routers from './project/router.js'; import * as serviceWorker from './service
如何正确理解和使用ES6 Promise?(We have a problem with promises)
西涛offbye-移动全栈技术博客
08-19 3627
Fellow JavaScripters, it's time to admit it: we have a problem with promises.No, not with promises themselves. Promises, as defined by the A+ spec, are awesome.The big problem, which has revealed itse
useEffect 清理副作用
sherly_chen的博客
12-12 1862
掌握 useEffect 清理副作用的写法。
vue hooks 和 react hooks 有什么区别
最新发布
04-19
Vue Hooks 和 React Hooks 是两种不同的前端框架中用于处理组件逻辑的方式。它们有一些相似之处，但也存在一些区别。 1. Vue Hooks： - Vue Hooks 是在 Vue 3.x 版本中引入的，用于函数式组件中管理组件状态和生命周期钩子。 - Vue Hooks 使用 `setup` 函数来定义组件逻辑，可以在其中使用 `ref`、`reactive` 等函数来创建响应式数据。 - Vue Hooks 可以使用 `onMounted`、`onUpdated`、`onUnmounted` 等函数来模拟类组件中的生命周期钩子。 - Vue Hooks 还提供了一些其他的钩子函数，如 `watch`、`computed` 等，用于处理数据的监听和计算。 2. React Hooks： - React Hooks 是在 React 16.8 版本中引入的，用于函数式组件中管理组件状态和副作用。 - React Hooks 使用 `useState`、`useEffect`、`useContext` 等函数来定义组件逻辑。 - React Hooks 的 `useState` 函数可以创建和管理组件的状态，而 `useEffect` 函数可以处理副作用操作，如数据获取、订阅等。 - React Hooks 还提供了一些其他的钩子函数，如 `useReducer`、`useCallback`、`useMemo` 等，用于处理复杂的状态管理和性能优化。 总体而言，Vue Hooks 和 React Hooks 都是用于函数式组件中管理组件逻辑的方式，但在具体的实现和使用上有一些差异。Vue Hooks 更加贴近 Vue 的响应式系统，而 React Hooks 则更加注重副作用操作和性能优化。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值