记录下react hooks实战项目中用法
react hooks 主要提供了几种 hooks 函数,可以使传统的react函数组件可以管理状态,可以模拟生命周期,等操作。
现在开始介绍常用的hooks 函数
- useState
function hooksComponent(){
let [setCount,count] = setState(0);
return (
<button onClick={()=>{
setCount(count+1)
}}></button>
)
}
let [setCount,count] = useState(0) 传递的参数是state的初始值 返回两个值的数组 用数组解构的方式把两个值解构出来 数组第一个值是 改变count的setcount方法 第二个值就是state值
- useEffect
当设置setEffect如果第二个参数没有设置值,每次状态更新都会执行改函数一次
如果模拟class组件中的componentDidMount生命周期可以把useEffect设置为空
useEffect(()=>{
console.log("模拟componentDidMount生命周期");
return ()=>{
console.log("执行返回函数")
}
},[])
如果第二个参数什么也不设置 那么当组件挂载完成后会执行一次 此后
每当组件状态更新或者props发生变化的时候都会执行该effect函数
那么这种方式可以模拟 componentDidUpdate 生命周期
如果给useEffect第二个值设置依赖状态 那么当组件挂载完成会执行一次 之后会等依赖状态变化才会去更新该函数,如果设置多个依赖状态,当多个依赖中的一个依赖状态发生数据改变都会引起effect的执行
说一下useEffect函数返回函数的作用 如果把useEffect第二个参数设置为空数组 那么这个返回的函数等到组件被卸载之前才会被执行 所以此方式可以模拟 组件销毁的生命周期 conponentWillOnmount
那么如果第二个参数设置依赖状态 那么useEffect 返回函数会什么时候执行呢, 当这种情况下 依赖状态改变 执行useEffect函数之前才会执行该返回函数
export default function HooksComponent() {
let [count, setCount] = useState(0);
let [testval, setTestval] = useState(0);
useEffect(() => { //第一次组件挂载完成后执行一次 之后随着count 变化才执行
console.log("user effect running.... run...");
return () => {//如果为【】数组 当组件销毁之前执行 如果绑定count则当count下次改变时先执行 relax 再执行函数
console.log("relax")
}
}, [count, testval]);
return (
<div onClick={() => { setCount(100); }}>
count--->{count}
</div>
)
}
- useCallback
useCallback改hooks函数主要的作用是缓存函数,什么意思呢,
也就是想我们如果在一个函数组件里面写一个普通的方法 如下:
function callbackHook(props){
function callback(){
//
}
return (<div>props.value</div>)
}
每次props发生变化 callbaclHook组件都会被从执行重新 该方法都会新创建一个,这样效率会明显很低 ,如何优化该方式呢 那就是采用useCallback
如果我 将useCallback设置第二个参数为空数组 那么这个函数只会创建一次 当每次state或者props发生改变 重新执行该函数组件大的时候都不会被重新创建
此外第二个参数还可以设置依赖状态,当组件创建的时候被useCallback缓存的函数会创建一次 ,此后每当依赖的状态发生变化才会再次从新创建缓存函数
值得注意的是 像 useCallback和 useMem useEffect 执行的时候才会捕获组件函数内的变量 也就是每次捕获会产生一个闭包 ,如果依赖某个状态 当那个状态没有改变 该函数也没有从新去组件中获取新的状态时那么 函数中的数据都是上次捕获的数据 所以这里要注意