React中10种Hook的使用介绍.docx

第

React中10种Hook的使用介绍

constUseEffect=(props)={

//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘reacthook是真的好用啊

const[hook,sethook]=useState(reacthook是真的好用啊);

const[name]=useState(baby张);

return(

headerclassName=UseEffect-header

h3UseEffect/h3

Childhook={hook}name={name}/

{/**上面的变量和下面方法也是可以直接使用的*/}

button()=sethook(我改变了reacthook的值+newDate().getTime())}改变hook/button

/header

constChild=(props)={

const[newhook,setnewhook]=useState(props.hook);

//这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次

useEffect(()={

console.log(firstcomponentDidMount);

},[]);

//第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。

useEffect(

()={

setnewhook(props.hook+222222222);

console.log(useEffect);

return()={

console.log(componentWillUnmount);

[props.hook]

//useLayoutEffect强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数

useLayoutEffect(

()={

console.log(useLayoutEffect);

return()={

console.log(useLayoutEffectcomponentWillUnmount);

[props.hook]

return(

div

p{}/p

{newhook}

/div

exportdefaultUseEffect;

3.useMemouseCallback

他们都可以用来优化子组件的渲染问题，或者监听子组件状态变化来处理事件，这一点在以前是很难做到的，因为shouldComponentUpdate里能监听到是否变化，但没法控制其他的外部方法，只能返回true和false,而componentDidUpdate只能在更新后执行，所以想在渲染之前做些事情就不好搞了。

useCallback目前还不能用

importReact,{useState,useMemo}fromreact;

constChild=({age,name,children})={

//在不用useMemo做处理的时候，只要父组件状态改变了，子组件都会渲染一次，用了useMemo可以监听某个状态name，当name变化时候执行useMemo里第一个函数

console.log(age,name,children,;

functionnamechange(){

console.log(age,name,children,;

returnname+change;

{/**react官网虽说useCallback与useMemo的功能差不多，但不知道版本问题还怎么回是，这个方法目前还不能用

constmemoizedCallback=useCallback(

()={

console.log(useCallback)

[name],

console.log(memoizedCallback,memoizedCallback)

//useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化