企业网站 多网站推广源码搭建app教程

当前位置： 首页 > news >正文

企业网站 多网站推广,源码搭建app教程,江门 网站设计,哪个网站可以免费建站啊免费建网站总览 hooks 功能分类具体 hooks具体功能React v18新特性跨端支持数据更新驱动useState定义要在页面中渲染的数据❌✔useReducer定义要在页面中渲染的数据#xff0c;且这个数据有多种处理逻辑❌✔useSyncExternalStoreconcurrent 模式下#xff0c;订阅外部 store 的行为且这个数据有多种处理逻辑❌✔useSyncExternalStoreconcurrent 模式下订阅外部 store 的行为触发更新✔❌useTransitionconcurrent 模式下在不阻塞 UI 的情况下来更新状态✔❌useDeferredValueconcurrent 模式下延迟更新 UI 的某些部分✔❌执行副作用useEffect异步状态下视图更新后执行副作用❌✔useLayoutEffect同步状态下视图更新前执行副作用❌✔useInsertionEffect用于处理 CSS-in-JS 缺陷问题✔❌状态获取与传递useContext接收祖先组件的 context 传递的信息❌✔useRef存储一个不需要渲染的值❌✔useImperativeHandle配合 forwardRef 将子组件的 ref 传递给父组件❌✔状态派生与保存useMemo缓存结果❌✔useCallback缓存函数❌✔工具 hooksuseId生成唯一的 ID✔❌useDebugValue在 React 开发者工具中为自定义 Hook 添加标签❌❌ 数据更新驱动 useState useState 允许向组件添加一个 状态变量。 /*** param { any } initValue初始值* return { array } arr状态信息state { any } 状态名setState { function } 修改状态的函数/ const [state, setState] useState(initValue)// 第一种方式传入值 setState(newValue);// 第二种方式传入函数 setState(preValue newValue);示例 const [number, setNumber] useState(0)// 第一种方式传入值 setNumber(number 1)// 第二种方式传入函数 setNumber(number number 1)注意事项 在函数组件一次执行上下文中state 的值是固定不变的如果两次 setState 传入相同的 state 值那么组件就不会更新当触发 setState 在当前执行上下文中获取不到最新的 state只有在下一次组件 render 中才能获取到 useReducer useReducer 能够在无状态组件中运行的类似 redux 的功能 api 。 当对一个状态有多种处理逻辑时建议使用 useReducer。 /** param { function } reducer处理函数* param { any } initValue初始值* param { function } compareInitValueFn计算初始值的函数如果存在则初始值为 compareInitValueFn(initValue)* return { array } arr状态信息state { any } 状态名dispatchState { function } 派发状态的函数/ const [state, dispatchState] useReducer(stateReducer, initValue, compareInitValueFn?)示例 const numberReducer (state, action) {switch(action.type) {case add:return state 1;case reduce:return state - 1;} } const [number, dispatchNumber] useReducer(numberReducer, 0);dispatchNumber({type: add })useSyncExternalStore useSyncExternalStore 可以订阅外部 store。 /** param { function } subscribe订阅函数* param { function } getSnapshot返回组件需要的 store 中的数据快照 带有记忆功能的选择器* param { function } getServerSnapshot用于 hydration 模式下的 getSnapshot* return { any } snapshot该 store 的当前快照/ const snapshot useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)示例 import { combineReducers , createStore } from redux/ number Reducer / function numberReducer(state 1, action) {switch(action.type) {case ADD:return state 1case DEL:return state - 1default:return state} }/ 注册reducer / const rootReducer combineReducers({ number: numberReducer }) / 创建 store / const store createStore(rootReducer, { number: 1})function Index(){/ 订阅外部数据源 /const state useSyncExternalStore(store.subscribe, () store.getState().number)return (divbutton onClick{()store.dispatch({type:ADD})}{ state }/button/div) }注意 getSnapshot 返回的 store 快照必须是不可变 如果底层 store 有可变数据要在数据改变时返回一个新的不可变快照否则返回上次缓存的快照。 如果在重新渲染时传入一个不同的 subscribe 函数React 会用新传入的 subscribe 函数重新订阅该 store 可以通过在组件外声明 subscribe 来避免。 useTransition useTransition 可以在不阻塞 UI 的情况下来更新状态。 /** return { array } transitionInfo转换状态信息isPending { boolean } 是否存在待处理的转换startTransition { function } 将状态由更新状态标记为转换状态param { function } scope作用域函数/ const [isPending, startTransition] useTransition()示例 export default function Index(){const [number, setNumber] React.useState(0) // 需要立即响应的任务立即更新任务const [count, setCount] useState(0) // 不需要立即响应的任务过渡任务const [isPending, startTransition] useTransition() const btnClick () {setNumber(number 1) // 立即更新startTransition(() { // startTransition 里面的任务优先级低setCount(count 1);})}return (divbutton onClick{()btnClick()}{ count }/button/div) }注意 只有在可以访问该状态的 set 函数时才能将更新包装为转换状态 如果想响应某个 prop 或自定义 Hook 值启动转换请尝试使用 useDeferredValue 传递给 startTransition 的函数必须是同步的。 useDeferredValue useDeferredValue 可以延迟更新 UI 的某些部分。 /** param { any } value延迟更新的值* return { any } deferredValue延迟更新的值/ const deferredValue useDeferredValue(value)示例 export default function Index(){const [number, setNumber] useState(1) // 需要立即响应的任务立即更新任务const deferNumber useDeferredValue(number) // 把状态延时更新类似于过渡任务const btnClick () {setNumber(number 1) // 立即更新}return (divbutton onClick{()btnClick()} { deferNumber }/button/div) }在组件的初始渲染期间返回的延迟值将与提供的值相同但是在组件更新时React 将会先尝试使用旧值进行重新渲染因此将返回旧值然后再在后台使用新值进行另一个重新渲染这时将返回更新后的值 注意应该向 useDeferredValue 传递原始值或在渲染之外创建的对象。 如果在渲染期间创建了一个新对象并立即将其传递给 useDeferredValue那么每次渲染时这个对象都会不同这将导致后台不必要的重新渲染。 执行副作用 useEffect useEffect 用于异步监听组件的 state 属性在浏览器绘制后执行。 /** param { function } setup回调函数初始化执行一次当监听的 state 改变时执行返回一个当组件被销毁时执行的函数* param { array } dependencies要监听的 state默认为所有 state空数组表示不监听任何 state/ useEffect(setup, dependencies?)示例 useEffect(() {let timer setInterval(() {console.log(1)}, 1000)return () {timer null} }, [])可以把 useEffect 看作是以下三个生命周期的组合 componentDidMount()组件挂载完成执行 callbackcomponentDidUpdate()监听的 state 变化执行 callbackcomponentWillUnmount()组件将要销毁执行 callback 的返回函数 useLayoutEffect useLayoutEffect 是 useEffect 的同步版本并且是在浏览器绘制前执行主要用于操作 DOM。 注意useLayoutEffect callback 中代码执行会阻塞浏览器绘制 /** param { function } setup回调函数初始化执行一次当监听的 state 改变时执行返回一个当组件被销毁时执行的函数* param { array } dependencies要监听的 state默认为所有 state空数组表示不监听任何 state/ useLayoutEffect(setup, dependencies?)useInsertionEffect useInsertionEffect 可以在布局副作用触发之前将元素插入到 DOM 中。 注意useInsertionEffect 是为 CSS-in-JS 库的作者特意打造的。除非正在使用 CSS-in-JS 库并且需要注入样式否则应该使用 useEffect 或者 useLayoutEffect。 /** param { function } setup回调函数初始化执行一次当监听的 state 改变时执行返回一个当组件被销毁时执行的函数* param { array } dependencies要监听的 state默认为所有 state空数组表示不监听任何 state/ useInsertionEffect(setup, dependencies?)状态获取与传递 useContext useContext 用于接收祖先组件的 context 传递的信息。 /** param { context } contextcontext 容器* return { any } value祖先组件传递的 context/ const value useContext(context)示例 // 1、创建 context 容器 const NumberContext createContext(null);// 2、祖先组件定义 Provider function GrandFather() {return (NumberContext.Provider value{1}Father //NumberContext.Provider); }// 3、父组件中使用子组件 function Father() {return (Son/Son) }// 4、子组件中通过 useContext 接收祖先组件传递的数据 function Son() {const number useContext(NumberContext); }useContext() 总是在调用它的组件 上面 寻找最近的 provider。它向上搜索不考虑 调用 useContext() 的组件中的 provider。 useRef useRef 可以存储一个不需要渲染的值。 与 state 的区别ref 的改变不会渲染state 会 与普通对象的区别ref 的值不会重置普通对象会 /** param { any } initValue初始值* return { ref } ref只有 current 属性的 ref 对象/ const ref useRef(initValue)示例 function Demo() {const divRef useRef(null)return (div ref{divRef}ref节点/div) }不要在 渲染期间 写入或者读取 ref.current。 可以在 事件处理程序或者 effects 中读取和写入 ref。 useImperativeHandle useImperativeHandle 配合 forwardRef 将子组件的 ref 传递给父组件。 /** param { ref } refforWardRef 渲染函数中获得的第二个参数* param { function } createHandle处理函数返回值作为暴露给父组件的 ref 对象* param { array } dependencies依赖项/ useImperativeHandle(ref, createHandle, dependencies?)示例 // 子组件 const Son forwardRef((props, ref) {const divRef useRef(null)useImperativeHandle(ref, () {return {sendData: () {console.log(divRef.current)}}}, [])return div ref{divRef}子组件/div })// 父组件 function Parent() {const sonRef useRef(null)return Son ref{sonRef}/Son }状态派生与保存 useMemo useMemo 在每次重新渲染的时候能够缓存计算的结果。 /** param { function } calculateValue要缓存计算值的函数返回值作为缓存值* param { array } dependencies依赖项数组* return { any } cachedValue缓存值calculateValue 返回的值/ const cachedValue useMemo(calculateValue, dependencies)cachedValue 初次为不带参数调用 calculateValue 的返回值后续如果依赖项没有变就返回上次缓存的值否则将再次调用 calculateValue并返回最新结果 注意应该仅仅把 useMemo 作为性能优化的手段 useCallback useCallback 允许在多次渲染中缓存函数。 /** param { function } fn想要缓存的函数* param { array } dependencies依赖项数组* return { function } cachedFn缓存的函数/ const cachedFn useCallback(fn, dependencies)在初次渲染时useCallback 返回你已经传入的 fn 函数在之后的渲染中, 如果依赖没有改变useCallback 返回上一次渲染中缓存的 fn 函数否则返回这一次渲染传入的 fn。 注意 不应在循环或者条件语句中调用 useCallback应该仅仅把 useMemo 作为性能优化的手段 工具 hooks useId useId 可以生成传递给无障碍属性的唯一 ID。 /** return { string } id唯一的字符串 ID/ const id useId()注意不要使用 useId 来生成列表中的 key。 useDebugValue useDebugValue 可以在 React 开发工具 中为自定义 Hook 添加标签。 /** param { any } value在 React 开发工具中显示的值* param { function } format如果传入则值为将 value 作为参数调用 format 返回的值否则值为 value*/ useDebugValue(value, format?)