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>
相关推荐
namekong81 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天2 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄5 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1016 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19436 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧6 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台6 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1007 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc7 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅9 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学