网站建设管理典型经验材料,优化方案英语必修三电子版,设计网站做海报,怎么制作自己的简历1 useEffect(setup,dependencies)
使用object.is来比较每个依赖项和它先前的值
依赖项为空数组的effect不会在组件任何props和state发生改变时重新运行
当useEffect依赖于外部传入props对象时#xff0c;容易造成死循环 需要对依赖对象进行深比较
import { isEqual } from…1 useEffect(setup,dependencies)
使用object.is来比较每个依赖项和它先前的值
依赖项为空数组的effect不会在组件任何props和state发生改变时重新运行
当useEffect依赖于外部传入props对象时容易造成死循环 需要对依赖对象进行深比较
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
const ref useRef(null)
input ref{ref} /获取子元素的ref
const children forwardRef((props,ref){return (Input ref{ref}/)
})3 useContext
跨层级传递变量
const ThemeContext createContext(null)ThemeContext.Provider valuedarkForm
ThemeContext.Provider///使用context
const context useContext(ThemeContext)通过context更新对象 Provider value{{user,setUser}}/Provider4 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会跳过组件和子组件的重新渲染
用法
//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不同部分
应用场景当样式有overflowhidden或z-index需要子组件能视觉上跳出当前容器
import {createPortal} from react-domdiv{createPortal(p /, document.body) }
/div
