react hooks

1 useEffect(setup,dependencies)

使用object.is来比较每个依赖项和它先前的值

依赖项为空数组的effect不会在组件任何props和state发生改变时重新运行

当useEffect依赖于外部传入props对象时,容易造成死循环

需要对依赖对象进行深比较

javascript 复制代码
import { isEqual } from 'lodash'
const useCompare = (value: any, compare: any) => {
	const ref = useRef(null)
	if(!compare(value,ref.current)){
		ref.current = value
	}
	return ref.current
}

const params = useCompare({
	...accessParam,
	...reqParam,
},isEqual)

useEffect(()=>{
},[params])

2 useRef

应用一个不需要渲染的值,改变ref不会触发重新渲染

复制代码
const ref = useRef(value)

不要在渲染期间写入或读取ref.current

通过ref操作DOM:

javascript 复制代码
const ref = useRef(null)
<input ref={ref} />

获取子元素的ref

javascript 复制代码
const children = forwardRef((props,ref)=>{
	return (
		<Input ref={ref}/>
	)
})

3 useContext

跨层级传递变量

javascript 复制代码
const ThemeContext = createContext(null)

<ThemeContext.Provider value='dark'>
	<Form>
<ThemeContext.Provider/>

//使用context
const context = useContext(ThemeContext)

通过context更新对象

javascript 复制代码
	<Provider value={{user,setUser}}></Provider>

4 useImperativeHandle(ref,createHandle,dependencies)

用于定义ref暴露出的句柄

5 useReducer(reducer, initialArg,init?)

允许向组件里面添加一个reducer用于状态管理

  • reducer(state,action) => newState 用于更新state的纯函数
  • initialArg:初始化state的值
  • init:用于计算初始值的函数

返回值为数组:[currentState, dispatch]

注意 :dispatch函数为下一次渲染更新state,因此调用后拿不到更新后的值。如果提供state与当前state一致react会跳过组件和子组件的重新渲染

用法:

javascript 复制代码
//state是只读的,不可尝试修改
const reducer = (state,action) => {
	if(action.type === '') {
		return {
			...state
		}
	}
}

const [state, dispatch] = useReducer(reducer, { age: 42 })

//调用更新函数
dispatch({type: ''})

6 memo

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

如果传递给组件的props是一个对象,应使用useMemo避免父组件每次重新创建该对象
如果传递给组件的props是一个函数,应使用useCallback进行缓存

7 createPortal(children,domNode,key?)

允许将JSX作为children渲染至DOM不同部分

应用场景:当样式有overflow:hidden或z-index,需要子组件能视觉上跳出当前容器

javascript 复制代码
import {createPortal} from 'react-dom'

<div>
	{
		createPortal(<p />, document.body)	
	}
</div>
相关推荐
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf3 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊3 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel3 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260853 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
蓝莓味的口香糖3 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
ObjectX前端实验室4 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart4 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级4 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang5 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构