React常用hooks

最新推荐文章于 2024-04-29 23:35:50 发布
最新推荐文章于 2024-04-29 23:35:50 发布
阅读量222 收藏 6
点赞数 4
分类专栏： JavaScript React 文章标签： react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63001592/article/details/138248632
版权

1、useReducer

作用：让 React 管理多个相对关联的状态数据

import { useReducer } from 'react'
​
// 1. 定义reducer函数，根据不同的action返回不同的新状态
function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    default:
      return state
  }
}
​
function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
    </>
  )
}
​
export default App

更新流程

  1. 使用 dispatch 函数触发 reducer 函数
  2. reducer 函数内部根据不同的 action type 返回不同的状态
  3. 使用最新返回的状态渲染UI

分派action传参

做法：分派action时如果想要传递参数，需要在action对象中添加一个payload参数，放置状态参数

// 定义reducer
​
import { useReducer } from 'react'
​
// 1. 根据不同的action返回不同的新状态
function reducer(state, action) {
  console.log('reducer执行了')
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'UPDATE':
      return state + action.payload
    default:
      return state
  }
}
​
function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
      <button onClick={() => dispatch({ type: 'UPDATE', payload: 100 })}>
        update to 100
      </button>
    </>
  )
}
​
export default App

2、useMemo

作用： 它在每次重新渲染的时候能够缓存计算的结果

下面我们的本来的用意是想基于count的变化计算斐波那契数列之和，但是当我们修改num状态的时候，斐波那契求和函数也会被执行，显然是一种浪费

// useMemo
// 作用：在组件渲染时缓存计算的结果
​
import { useState } from 'react'
​
function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}
​
function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  const sumByCount = factorialOf(count)
​
  const [num, setNum] = useState(0)
​
  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}
​
export default App

useMemo缓存计算结果

思路: 只有count发生变化时才重新进行计算

import { useMemo, useState } from 'react'
​
function fib (n) {
  console.log('计算函数执行了')
  if (n < 3) return 1
  return fib(n - 2) + fib(n - 1)
}
​
function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sum = fib(count)
  // 通过useMemo缓存计算结果，只有count发生变化时才重新计算
  const sum = useMemo(() => {
    return fib(count)
  }, [count])
​
  const [num, setNum] = useState(0)
​
  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}
​
export default App

React.memo

作用：允许组件在props没有改变的情况下跳过重新渲染

组件默认的渲染机制

默认机制：顶层组件发生重新渲染，这个组件树的子级组件都会被重新渲染

// memo
// 作用：允许组件在props没有改变的情况下跳过重新渲染
​
import { useState } from 'react'
​
function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is son</div>
}
​
function App() {
  const [, forceUpdate] = useState()
  console.log('父组件重新渲染了')
  return (
    <>
      <Son />
      <button onClick={() => forceUpdate(Math.random())}>update</button>
    </>
  )
}
​
export default App

使用React.memo优化

机制：只有props发生变化时才重新渲染 下面的子组件通过 memo 进行包裹之后，返回一个新的组件MemoSon, 只有传给MemoSon的props参数发生变化时才会重新渲染

import React, { useState } from 'react'
​
const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
})
​
function App() {
  const [, forceUpdate] = useState()
  console.log('父组件重新渲染了')
  return (
    <>
      <MemoSon />
      <button onClick={() => forceUpdate(Math.random())}>update</button>
    </>
  )
}
​
export default App

props变化重新渲染

import React, { useState } from 'react'
​
const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
})
​
function App() {
  console.log('父组件重新渲染了')
​
  const [count, setCount] = useState(0)
  return (
    <>
      <MemoSon count={count} />
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </>
  )
}
​
export default App

props的比较机制

对于props的比较，进行的是‘浅比较’，底层使用 Object.is 进行比较，针对于对象数据类型，只会对比俩次的引用是否相等，如果不相等就会重新渲染，React并不关心对象中的具体属性

import React, { useState } from 'react'
​
const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
})
​
function App() {
  // const [count, setCount] = useState(0)
  const [list, setList] = useState([1, 2, 3])
  return (
    <>
      <MemoSon list={list} />
      <button onClick={() => setList([1, 2, 3])}>
        {JSON.stringify(list)}
      </button>
    </>
  )
}
​
export default App

说明：虽然俩次的list状态都是 [1,2,3] , 但是因为组件App俩次渲染生成了不同的对象引用list，所以传给MemoSon组件的props视为不同，子组件就会发生重新渲染

自定义比较函数

如果上一小节的例子，我们不想通过引用来比较，而是完全比较数组的成员是否完全一致，则可以通过自定义比较函数来实现

import React, { useState } from 'react'
​
// 自定义比较函数
function arePropsEqual(oldProps, newProps) {
  console.log(oldProps, newProps)
  return (
    oldProps.list.length === newProps.list.length &&
    oldProps.list.every((oldItem, index) => {
      const newItem = newProps.list[index]
      console.log(newItem, oldItem)
      return oldItem === newItem
    })
  )
}
​
const MemoSon = React.memo(function Son() {
  console.log('子组件被重新渲染了')
  return <div>this is span</div>
}, arePropsEqual)
​
function App() {
  console.log('父组件重新渲染了')
  const [list, setList] = useState([1, 2, 3])
  return (
    <>
      <MemoSon list={list} />
      <button onClick={() => setList([1, 2, 3])}>
        内容一样{JSON.stringify(list)}
      </button>
      <button onClick={() => setList([4, 5, 6])}>
        内容不一样{JSON.stringify(list)}
      </button>
    </>
  )
}
​
export default App

3、useCallback

上一小节我们说到，当给子组件传递一个引用类型prop的时候，即使我们使用了memo 函数依旧无法阻止子组件的渲染，其实传递prop的时候，往往传递一个回调函数更为常见，比如实现子传父，此时如果想要避免子组件渲染，可以使用 useCallback缓存回调函数

// useCallBack
​
import { memo, useState } from 'react'
​
const MemoSon = memo(function Son() {
  console.log('Son组件渲染了')
  return <div>this is son</div>
})
​
function App() {
  const [, forceUpate] = useState()
  console.log('父组件重新渲染了')
  const onGetSonMessage = (message) => {
    console.log(message)
  }
​
  return (
    <div>
      <MemoSon onGetSonMessage={onGetSonMessage} />
      <button onClick={() => forceUpate(Math.random())}>update</button>
    </div>
  )
}
​
export default App

useCallback 缓存函数

useCallback 缓存之后的函数可以在组件渲染时保持引用稳定，也就是返回同一个引用

// useCallBack
​
import { memo, useCallback, useState } from 'react'
​
const MemoSon = memo(function Son() {
  console.log('Son组件渲染了')
  return <div>this is son</div>
})
​
function App() {
  const [, forceUpate] = useState()
  console.log('父组件重新渲染了')
  const onGetSonMessage = useCallback((message) => {
    console.log(message)
  }, [])
​
  return (
    <div>
      <MemoSon onGetSonMessage={onGetSonMessage} />
      <button onClick={() => forceUpate(Math.random())}>update</button>
    </div>
  )
}
​
export default App

4、forwardRef

作用：允许组件使用ref将一个DOM节点暴露给父组件

import { forwardRef, useRef } from 'react'
​
const MyInput = forwardRef(function Input(props, ref) {
  return <input {...props} type="text" ref={ref} />
}, [])
​
function App() {
  const ref = useRef(null)
​
  const focusHandle = () => {
    console.log(ref.current.focus())
  }
​
  return (
    <div>
      <MyInput ref={ref} />
      <button onClick={focusHandle}>focus</button>
    </div>
  )
}
​
export default App

5、useImperativeHandle

作用：如果我们并不想暴露子组件中的DOM而是想暴露子组件内部的方法

import { forwardRef, useImperativeHandle, useRef } from 'react'
​
const MyInput = forwardRef(function Input(props, ref) {
  // 实现内部的聚焦逻辑
  const inputRef = useRef(null)
  const focus = () => inputRef.current.focus()
​
  // 暴露子组件内部的聚焦方法
  useImperativeHandle(ref, () => {
    return {
      focus,
    }
  })
​
  return <input {...props} ref={inputRef} type="text" />
})
​
function App() {
  const ref = useRef(null)
​
  const focusHandle = () => ref.current.focus()
​
  return (
    <div>
      <MyInput ref={ref} />
      <button onClick={focusHandle}>focus</button>
    </div>
  )
}
​
export default App
IndulgeBack
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React渲染和优化
liuj4 | 自娱自乐
11-05 514
单纯子组件渲染不会引起父组件渲染！ 当父组件重渲染的时候，会默认递归的重渲染所有子组件
[React]组件渲染性能优化
m0_51514727的博客
01-28 867
可以看到，在更新子组件的数据时，由于数据是从父组件传递下去的，相当于更新了父组件数据，那么父组件就会重新渲染，最终导致的结果就是父组件下面所有的子组件都重新渲染了。的生命周期钩子函数，该函数会在渲染执行之前被调用，函数内部能够接收到新的属性和新的状态，我们要做的就是让新的属性和状态和当前的属性以及状态进行浅比较，如果相同则返回。可以看到，父组件的更新会导致两个子组件更新，这是正常的，子组件各自的更新不会影响其他组件。的状态时，子组件也会跟着更新，原因很简单，因为父组件更新了，那你子组件当然要重新更新。
react 渲染优化
weixin_34148508的博客
04-05 143
2019独角兽企业重金招聘Python工程师标准>>> ...
React渲染性能的优化
2302_77101581的博客
01-01 586
如果上一小节的例子，我们不想通过引用来比较，而是完全比较数组的成员是否完全一致，则可以通过自定义比较函数来实现​// 自定义比较函数return (})​console.log('子组件被重新渲染了')​console.log('父组件重新渲染了')return (内容一样{JSON.stringify(list)}内容不一样{JSON.stringify(list)}​。
React组件渲染优化
cry
09-13 246
CartList.js import React, { Component, PureComponent } from 'react'; class CartList extends Component { constructor(props) { super(props); this.state = { goods: [] } } componentDidMount() { setInter
React渲染-几个性能优化点
唐唐唐行的博客
03-27 432
在过去的一段时间，我一直围绕项目中体验不好或者无效渲染较为严重的组件做，多少积累了一些经验所以想着整理成一片文章，下图就是优化后的一个组件，可以对比优化前一次切换与优化后多次切换的渲染颜色深度与按钮的切换速度：关于减少组件无效渲染，与其说是提几点建议，不如说是在优化过程中所记录的一些不规范的写法，能写出更好的代码总是更棒的，也希望这几点建议能对大家能有些许帮助。当然，以下建议不管class组件还是hooks中其实都有参考意义，那么本文开始。
【React】列表应用
qq_45677671的博客
04-22 332
文章目录渲染列表组件基础列表组件用 key 提取组件 渲染列表组件 我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems： const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); 我们把整个 listItems
React渲染机制及相关优化方案
weixin_53068161的博客
07-09 3112
文章主要简单记录react中的渲染机制以及相关的优化方案，内容包括如下： （1）react渲染步骤、concurrent机制以及产生作用的机会；（2）简单模拟实现 concurrent mode；（3）基于作业调度优先级的思路进行项目优化的两个hooks；（4）案例演示
React（六）：重渲染优化
MR洁儿的博客
12-19 1831
由上一篇文章《React（五）：React在什么情况下会render》可知，除初始化组件渲染外，组件会在以下两种情况下发生重渲染： 1、当调用setState()函数时，组件会发生重渲染，即使组件的state未发生改变； 2、当父组件发生重渲染时，其全部子组件都会重渲染。 虽然React的重渲染机制是严谨的，但是也是非常耗时的，我们有两种方式来阻止组件不必要的重渲染。 1、shouldCo...
React渲染优化之immutableJS(一)
我是渣渣
10-07 626
我们都知道react是数据变更以后就会刷新页面，但是如果我们只是变了某一个数据，然后整个页面都刷新的话，那会很消耗浏览器的性能，我门能做的，就是减少不必要的刷新，具体怎么做，我们一步步的来 项目搭建 这里使用create-react-app stduy_immutable初始化项目 项目初始化完成之后，进入src目录，删除所有文件，自己新建一个index.js 先来一个简单的计数器demo，...
react性能优化篇
it_varlue的博客
04-04 294
React性能优化的方法有哪些？ React中使用shouldComponentUpdate的原因是什么？
react性能优化的方法
weixin_43801836的博客
03-28 6604
react性能优化的6中方法： 1.避免使用内联函数。每次render渲染时，都会创建一个新的函数实例，应该在组件内部创建一个函数，讲事件绑定到函数，这样每次调用render时，就不会创建单独的函数实例。 2.使用react fragement 避免额外标记。用户创建新组件时，每个组件应具有单个父标签，父级不能有两个标签。所以顶部要有一个公共标签，所以经常在组件顶部添加额外标签div，这个div标签充当父标签意外，没有其他作用，这个时候可以使用fragement，它不会向组件引入任何的额外标记，但是可以作为
[react] react怎么提高列表渲染的性能？
歌谣的博客
11-23 196
[react] react怎么提高列表渲染的性能？ 使用webpack 做代码分割。 使用hooks。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
[react优化] 避免组件或数据多次渲染/计算
Madman528的博客
04-09 636
代码如下 点击视图x➕1,导致视图更新, 视图更细导致a也重新大量计算!允许你的组件在 props 没有改变的情况下跳过重新渲染。有代码如下,每次状态改变,,父组件和子组件都要重新渲染。每次都重新渲染,因为数组是引用类型,内存地址不一样。其实是会变的,x变a就重新变化。代码如下,传了一个数组。用useMemo,让他换缓存。有没有办法优化掉这个大量计算呢?怎么解决避免子组件重新渲染?当然useState也可以。每次更新都浪费时间去计算。这样子组件就不会变化了。
react的性能优化
m0_60322879的博客
05-03 263
react的性能优化
React组件性能优化若干问题
前端高薪进击手记
03-04 348
在memo方法内部，其实也是进行的浅层比较。这个浅层比较对于引用数据类型来说，比较的是数据的引用地址。所以如果遇到引用数据类型的话，我们需要去传递自定义比较逻辑。memo方法是可以接收第二个参数的，第二个参数是一个函数，我们可以通过这个函数参数来编写我们自定义比较逻辑。该函数参数接收两个参数，分别是prevProps和nextProps。与shouldComponentUpdate的返回值逻辑相反，返回true，则不重新渲染；返回false的话则需要重新渲染。
浅谈React性能优化的方向
weixin_34062469的博客
06-15 283
本文来源于公司内部的一次闪电分享，稍作润色分享出来。主要讨论 React 性能优化的主要方向和一些小技巧。如果你觉得可以，请多点赞，鼓励我写出更精彩的文章
带你深入React.js开发实战，从复杂列表的样式到性能优化
最新发布
re_xue的博客
04-29 855
接下来，我想和大家继续分享一下在React.js开发中，关于复杂列表的一些经验和思考。我们将从复杂列表的常见样式、开发方式、高度自适应、性能优化等方面展开详细的讨论。 希望通过这篇文章，能够帮助大家在实际的React.js项目中更好地应对复杂列表的开发和优化。那么，让我们开始吧！
react常用hooks
05-30
React中常用的Hooks包括： 1. useState: 用于在函数组件中管理state状态的Hook。 2. useEffect: 用于在函数组件中处理副作用的Hook，类似于class组件中的componentDidMount、componentDidUpdate和componentWillUnmount生命周期函数。 3. useContext: 用于在函数组件中访问上下文的Hook。 4. useReducer: 用于在函数组件中管理复杂state状态的Hook。它是useState的替代品，可用于管理具有复杂状态转换逻辑的状态。 5. useCallback: 用于在函数组件中缓存函数以避免不必要的重新渲染的Hook，用于性能优化。 6. useMemo: 用于在函数组件中缓存计算结果以避免不必要的重新渲染的Hook，用于性能优化。 7. useRef: 用于在函数组件中保存可变值的Hook。它类似于class组件中的this.state，但不会触发重新渲染。 8. useImperativeHandle: 用于在函数组件中暴露自定义方法给父组件的Hook，类似于class组件中的ref属性。 9. useLayoutEffect: 用于在函数组件中处理副作用的Hook，类似于useEffect，但它会在DOM更新之后同步执行。 10. useDebugValue: 用于在开发过程中调试Hooks的Hook，用于开发过程中的调试和排错。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IndulgeBack

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值