常用的几个React hooks

react hooks

react hooks 是用来做什么？

1、  解决类组件臃肿的逻辑与难以维护的特性

usestate

1、用于更新数据，会重新渲染数据，尽量减少使用

2、  需要设置初始值时最好通过函数返回，尽量减少调用

const [count ,setCount] = usetate(()=>{
return props.countData || 0
})

3、  usestate是异步执行，通过在回调解决

 

useReducuer

1、  一个状态保存函数，返回是一个数组

function reducer (state,action){
switch(action.type){
case 'incerment':
    return state+1;
case 'decrement':
    return state -1
    default:
    retrun state
}
}
const [count ,dispatch] = useReducer(reducer, 0)
return <div>
<button onClick={()=>dispatch({type:incerment})}>+1</button>
 
<button onClick={()=>dispatch({type:decrement})}>-1</button>
{count}
</div>

useContext

1、  解决跨组建传递数据简化代码

const countContext = createContext();
const App = ()=>{
return<countContext.provider value={100}>
<son/>
</countContext.provider>
}
const Foo =()=>{
const vale = useContext(countContext)
return <div>{vale}</div>
}

 

useEffeact

组件挂载执行、组件更新时执行、组件卸载完成前执行

useEffeact(()=>{}) // 组件挂载完成执行，组件数据更新完成执行
useEffeact(()=>{},[]) //组件挂载完成后执行
useEffeact(()=>{
return ()=>{
console.log('卸载组件')
}
}); // 卸载组件时执行

useMemo

1、  会缓存结果,不会重新计算

2、  可以检测某个值变化参与渲染

const [count, setCount] = ustate(0);
const useRles =useMemo(()=>{
return count *2
},[count])

memo

性能优化，组件数据没有变化，阻止组件更新

const App = ()=>{
const [count ,setCount] = ustate();
return <div>{count}</div>
}
export default memo(App)

useCallback

1、  组件渲染时等到相同的函数

2、  性能优化、缓存函数使用一半useMome混用

const App = () =>{
const [count, setCount ] =useState;
const resetCount = useCallback(()=>setCount(0));
return (<div>
<Foo resetCount={resetCount}/>
</div>)
}
const Foo =memo( function (props) {
<bttoun onclik={props.resetCount}>resetCount</bttoun>
})

 

useRef

1、  保存数据（跨组建周期），不会触发组件更新

function APP(){
const [count,setCount] =useSate(0);
let timeId = useRef();
useEffect(()=>{
timeId.current = setInterval(()=>{
setCount(count=>count+1)
},1000)},[])
conststopCount = ()=>{
clearInterval(timeId.current)}
return <div>
{count}
<button onClick={conststopCount}>停止</button>
</div>
}