班级网站主页设计模板,智慧团建重置密码验证码,怎么在网站上做充话费业务,济南建网站价格文章目录 1.自定义hooks设计1.1 自定义hooks1.2 设计一个自定义hooks1.3 自定义hooks的驱动条件1.4 自定义hooks的通用模式1.5 自定义hooks的条件限定 1.自定义hooks设计
react-hooks是react16.8以后#xff0c;react新增的钩子API#xff0c;目的是增加代码的可复用性… 文章目录 1.自定义hooks设计1.1 自定义hooks1.2 设计一个自定义hooks1.3 自定义hooks的驱动条件1.4 自定义hooks的通用模式1.5 自定义hooks的条件限定 1.自定义hooks设计
react-hooks是react16.8以后react新增的钩子API目的是增加代码的可复用性逻辑性弥补无状态组件没有生命周期没有数据管理状态state的缺陷。react-hooks思想和初衷也是把组件颗粒化单元化形成独立的渲染环境减少渲染次数优化性能。
1.1 自定义hooks
自定义hooks是在react-hooks基础上的一个拓展可以根据业务需要制定满足业务需要的hooks更注重的是逻辑单元。
通过业务场景不同我们到底需要react-hooks做什么怎么样把一段逻辑封装起来做到复用这是自定义hooks产生的初衷。
1.2 设计一个自定义hooks hooks 专注的就是逻辑复用 是我们的项目不仅仅停留在组件复用的层面上。hooks让我们可以将一段通用的逻辑存封起来。将我们需要它的时候开箱即用即可。
1.3 自定义hooks的驱动条件
hooks本质上是一个函数。函数的执行决定与无状态组件组件自身的执行上下文。每次函数的执行(本质上就是组件的更新)就会执行自定义hooks的执行由此可见组件本身执行和hooks的执行如出一辙。
那么prop的修改,useState,useReducer使用是无状态组件更新条件那么就是驱动hooks执行的条件。 我们用一幅图来表示如上关系。 1.4 自定义hooks的通用模式 const [ xxx , ... ] useXXX(参数A,参数B...)编写hooks的时候, 需要注意传入和返回的值。
1.5 自定义hooks的条件限定
如果自定义hooks没有设计好比如返回一个改变state的函数但是没有加条件限定限定就有可能造成不必要的上下文的执行更有甚的是组件的循环渲染执行。
import React, {useEffect, useMemo, useState} from react;// const mock_data [
// {
// name: 1,
// age: 1
// },
// {
// name: 2,
// age: 2
// }
// ]function useFormatList(list){return list.map(item{console.log(1111)return item.toUpperCase()})
}const list [ aaa , bbb , ccc ]
function UseHooks(props) {const [num, setNum] useState(0)const newList useFormatList(list)return divdiv classNamelist { newList.map(itemdiv key{item} { item }/div) }/divdiv classNamenumber div{ num }/divbutton onClick{() setNum(num 1) } add/button/div/div
}export default UseHooks;格式化父组件传递过来的list数组并将小写变成大写但是当我们点击add。 理想状态下数组不需要重新format但是实际跟着执行format。无疑增加了性能开销。
function useFormatList(list) {return useMemo(() list.map(item {console.log(1111)return item.toUpperCase()}), [])
}所以一个好用的自定义hooks,一定要配合useMemo ,useCallback 等api一起使用。
