react函数组件常用的几个钩子函数

react框架

react框架包括包括两大类：类组件 函数组件。

类组件构成：constructor 自定义方法。调用方法通过this.方法名()。constructor(super state)构造器里面必有super字段。render()方法里面写页面布局。

函数组件构成：各种钩子函数 return()方法里面写页面布局。钩子函数是use开头的系列。

函数组件常用的钩子函数useState、useEffect、useRef、useCallback

一、useState

定义：

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

详细解释：在项目中，我们通过react-redux 或者dva数据存储框架进行全局声明并保存state中的数据。可是如果我们想在当前操作的index.tsx或者index.jsx中使用state,可以通过useState()钩子函数进行声明某一个当前页面的state数据状态。

用法：

1.  
   const [ count , setCount ] = useState(0);
2.  
    
3.  
   useState(params) 设置 第一个参数的初始值
4.  
   count 是第一个参数解构出的第一个参数
5.  
   setCount 是第二个参数 是一个函数 用来设置count

二、useEffect

定义：

什么是副作用

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

常见的副作用

数据请求 ajax发送

手动修改dom

localstorage操作

用法：

useEffect函数的作用就是为react函数组件提供副作用处理的！

1.  
   useEffect(() => {},[])
2.  
    
3.  
   接受2个参数，第一个是函数，第二个是数组
4.  
   如果第二个参数数组为空 它就是componentDidMount 只有第一次渲染
5.  
   如果二个参数数组 里面的值 设置的 值改变 它就是componentDidUpdate 只要值改变了 他就渲染
6.  
   useEffect 内部 最外层 支持return () => 相当于 componentWillUnmount 卸载 来开当前组件的时候触发 并且 每次更新都触发。

相同点： useState 和 useEffect 支持写多个

实际使用：

在项目中，结合dva，在页面组件中发起网络请求。

1.  
   useEffect(() => {函数},[])
2.  
   {dispatch({参数})}
3.  
   {type:'model模块名/某一个方法', //namespace如果在model外调用，需要添加。
4.  
   payload:{} //写法：state中定义的属性：属性值。需要传递的信息。
5.  
   }

三、useRef

定义：

使用useRef获取Dom元素，可以再useEffect中立马使用。

useEffect在页面组件中会渲染两次，根据react框架的设计者的设定，无法在初次渲染中拿到DOM(真实的Dom节点)，不能通过document.getElementByID('#id名')这种方式获取真实的dom节点。

ref的拿取：callbackRef

通过callbackRef，在组件挂载后，操作该dom。会在真实Dom生成时执行。使用callbackRef，使用它用回调函数的方式获取ref，进而保存使用。

使用步骤：

1.  
   const myRef = useRef()
2.  
   myRef.current = 赋值
3.  
   render/return (...)
4.  
   <div ref={myRef}>
5.  
   </div>