React常用hook的作用及用法

这篇博客详细介绍了React Hooks中的核心成员:useState用于状态管理,useEffect模拟生命周期,useMemo优化性能,useCallback缓存函数,useRef存储和跟踪值,以及useContext在组件间共享数据。通过这些Hook,开发者可以更高效地编写React组件,提升应用性能。
摘要由CSDN通过智能技术生成

React Hooks 

React常用的hook主要有八个 分别是 useState, useEffect, useMemo, useCallback, useContext, useRef, useLayoutEffect, useImerativeHandle

一、 useState

useState的作用是用来初始化一个值,要注意的是useState全都是异步的,他有两种用法

 第一种:

const [x, setX] = useState(值)

 第二种 :

const [y, setY] = useState(() => {
  // 逻辑
  // 必须有 return 
  return 值
})

如何获取上一次的值:

因为是异步的,所以我们无法直接获取上一次的值,那可以如何获取呢?

setX(preValue => {
  preValue //上一次的值
  return 值
 })

二、useEffect

useEffect的作用是用来模拟react的生命周期

// componentDidMount 只执行一次
   useEffect(() => {
    
   }, [])

// componentDidUpdate 更新完成
   useE
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React 中的 HookReact 16.8 版本中引入的一个新特性。Hook 可以让你在不编写 class 组件的情况下使用 state 和其他 React 特性。 以下是 React 中常见的 Hook 及其作用: 1. useState:用于在函数组件中使用 state。它返回一个数组,第一个值是当前 state 的值,第二个值是更新 state 的函数。例如: ``` import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` 2. useEffect:用于在函数组件中执行副作用操作,例如访问 DOM、网络请求等。它在组件每次渲染时都会执行。例如: ``` import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` 3. useContext:用于在函数组件中访问 React 上下文(Context)中的值。例如: ``` import React, { useContext } from 'react'; import { ThemeContext } from './theme-context'; function Example() { const theme = useContext(ThemeContext); return ( <div style={{ background: theme.background, color: theme.foreground }}> <p>This is a themed paragraph.</p> </div> ); } ``` 4. useRef:用于在函数组件中保存可变值,类似于 class 组件中的实例属性。例如: ``` import React, { useRef } from 'react'; function Example() { const inputRef = useRef(null); function handleClick() { inputRef.current.focus(); } return ( <div> <input ref={inputRef} type="text" /> <button onClick={handleClick}>Focus input</button> </div> ); } ``` 除了上述 HookReact 还提供了其他一些 Hook,例如 useReducer、useCallback、useMemo 等,它们都有不同的作用。了解并掌握这些 Hook 可以使你更加高效地编写 React 应用程序。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值