山西网站建设网站,优秀定制网站建设方案,wordpress 微信 同步,设计类专业是文科还是理科一、作用
我们知道react组件有两种写法一种是类组件#xff0c;另一种是函数组件。而函数组件是无状态组件#xff0c;如果我们要想改变组件中的状态就无法实现了。为此#xff0c;在react16.8版本后官方推出hooks#xff0c;用于函数组件更改状态。
二、常用API
1、use…一、作用
我们知道react组件有两种写法一种是类组件另一种是函数组件。而函数组件是无状态组件如果我们要想改变组件中的状态就无法实现了。为此在react16.8版本后官方推出hooks用于函数组件更改状态。
二、常用API
1、useState存储变量和修改变量
用法
有两个参数第一个参数状态中的属性。第二个参数更改第一个参数属性值的回调函数。 2、useeffect 给函数组件增加了操作副作用的能力通俗说就是让你某方法在特定的时刻才会去执行例如清除定时器
用法
2-1、 两个参数。第一个参数回调函数第二个参数是一个数组里面存放执行回调函数的依赖当为空数组时候该回调函数在该组件中只会执行一次。 2-2、 如果在useEffect第一个回调函数后加了一个return那么return里面相当于类组件中的组件销毁生命周期在return里可以写一些组件销毁时候要做的一些业务逻辑。 2-3、 一个组件内可以写多个useEffect 2-4、和useLayoutEffect的区别
useLayoutEffect在渲染页面前执行会阻塞渲染。当要在渲染页面前操作dom时候应使用useLayoutEffect否则用useEffect会出现页面抖动的情况。
useEffect当组件页面渲染完才会执行里面的逻辑。
3、useCallback记忆函数
当某个状态发生改变导致组件重新渲染时为防止与该状态无关的其他函数重新被创建使用useCallback方法
用法
两个参数。第一个参数被记忆的函数。第二个参数是一个数组里面放需要重新创建被记忆的函数的依赖。例如。在点击修改name组件按钮重新渲染的时候为了防止重新创建Add函数我们可以给Add函数加useCallback这样只有在第二个参数中num依赖发生改变的时候才会重新创建Add函数 4、useMemo 相当于vue中的计算属性
两个参数。第一个参数被记忆的函数。第二个参数是一个数组里面放需要重新计算的函数返回值的依赖。
useMemo 缓存的结果是回调函数中return回来的值,主要用于缓存计算结果的值,应用场景如需要计算的状态 useCallback 缓存的结果是函数,主要用于缓存函数 5、useRef 可以获取dom元素还可以和useState一样存放变量。 6、useContext
可以帮助我们跨越组件层级直接传递变量实现数据共享。
在react组件传值的博客中我们说到兄弟组件采用生产者和消费者。写起来很繁琐。 而使用hooks中useContext就很方便了包裹组件的父组件代码基本没变化主要消费者获取值很方便了如下图 7、useReducer 管理各个组件公共状态 一般与useContext结合使用
用法
该方法接受两个参数。第一个参数reducer第二个参数默认state通过解构获取useReducer中的state和dispatch。
完整代码如下
import React,{useContext,useReducer} from react
const defaultState {a:111,b:111
}
const reducer (state,action){let newState {...state}switch (action.type){case CHANGE-A:newState.a action.valuereturn newStatecase CHANGE-B:newState.b action.valuereturn newState}return state
}
const Global React.createContext(null)
export default function FnReducer(){// 通过解构获取useReducer中的state和dispatch方法const [state,dispatch] useReducer(reducer,defaultState)return(Global.Provider value{{state,dispatch}}div Chilid1 /Chilid2 /Chilid3 //div/Global.Provider)
}
function Chilid1(){const {dispatch} useContext(Global)return(divbutton onClick{(){dispatch({type:CHANGE-A,value:222})}}改变a/buttonbutton onClick{(){dispatch({type:CHANGE-B,value:333})}}改变b/button/div)
}
function Chilid2(){const {state} useContext(Global)return(div{state.a}/div)
}
function Chilid3(){const {state} useContext(Global)return(div{state.b}/div)
}
8、自定义hooks
为了让代码逻辑看起来结构清晰。我们可以把每个组件重复的逻辑单独抽出来然后封装一个函数 然后return出来只不过这个函数名必须以use开头。
以上就是hooks的理解与使用。
