详解useState
useState是react自带的一个hook函数,它的作用是用来声明状态变量。
useState这个函数接收的参数是状态的初始值,它返回一个数组,这个数组的第0位是当前的状态值,第1位是可以改变状态值的方法函数
1、useEffect的使用
useEffect可以用来代替我们常用的生命周期函数,代替了componentDidMount和componentDidUpdate生命周期函数
在这个函数中用一个返回一个函数的形式来代替componentWillUnmount组件即将要被卸载时执行
示例:
useEffect(()=>{
console.log(‘’);
// 在这里代替了组件即将要被卸载时进行的一些操作
return ()=>{
Console.log(‘老弟,你走了’)
}
},[])
// 这里useEffect函数中的第二个参数传空数组时代表当组件销毁时才会进行解绑
我的理解是在这里第二个参数是实现解绑条件
2、useContext的使用
useContext主要使用来实现父子组件之间的通信
3、useReducer的使用
useContext 和useReducer 合作可以完成类似的Redux库的操作,useReducer 可以让代码具有更好的可读性和可维护性,它类似于Redux中的reducer,reducer这个函数接收两个参数,一个是状态,一个用来控制业务逻辑的判断参数
4、useReducer useContext实现redux的状态管理和状态共享
实现状态全局化并能统一管理,统一个事件的派发
1、useDemo的使用
useMemo主要用来解决使用React hooks产生的无用渲染的性能问题,函数型组件没有shouldCompnentUpdate(组件更新前触发),我们就没有办法通过组件前的条件来决定组件是否更新.
且在函数组件中,也不再区分mount和update两个状态,这意味着函数组件的每一次调用都会执行内部的所有逻辑,就带来了非常大的性能损耗。useMemo和useCallback都是解决上述性能问题的
2、useRef的使用
用useRef获取React JSX中的DOM元素,获取后你就可以控制DOM的任何东西了。但是一般不建议这样来作,React界面的变化可以通过状态来控制。
用useRef来保存变量,这个在工作中也很少能用到,我们有了useContext这样的保存其实意义不大