关于react-hooks组件及它的属性

854 阅读2分钟

详解useState

useState是react自带的一个hook函数,它的作用是用来声明状态变量。

useState这个函数接收的参数是状态的初始值,它返回一个数组,这个数组的第0位是当前的状态值,第1位是可以改变状态值的方法函数

1、useEffect的使用

useEffect可以用来代替我们常用的生命周期函数,代替了componentDidMount和componentDidUpdate生命周期函数

在这个函数中用一个返回一个函数的形式来代替componentWillUnmount组件即将要被卸载时执行

示例:

useEffect(()=>{

    console.log(‘’);

    // 在这里代替了组件即将要被卸载时进行的一些操作

    return ()=>{

    Console.log(‘老弟,你走了’)

    }

},[])

// 这里useEffect函数中的第二个参数传空数组时代表当组件销毁时才会进行解绑

我的理解是在这里第二个参数是实现解绑条件

hooks.jpg


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这样的保存其实意义不大