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

目录

一、react框架

二、react函数组件常用的Hook

一、useState

1.定义：

2.语法：

二、useEffect

1.定义：

(1).什么是副作用?

(2).常见的副作用

(3).useEffect怎么获取真实的dom节点？ 

2.语法：

三、useRef

1.定义：

2.ref的拿取：callbackRef

3.ref的使用步骤

四、useCallback

五、其它

(一)、useState和useEffect的相同点： useState 和 useEffect 支持写多个

(二)、react函数组件在页面组件中，发起网络请求的方式：

(三)、vue框架有虚拟dom，react框架有虚拟dom吗？

(四)、react框架的类组件和函数组件的区别？官方更推荐哪种写法？

---

一、react框架

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

• 类组件构成：constructor+自定义方法。调用方法通过this.方法名()。constructor(super+state)构造器里面必有super字段。render()方法里面写页面布局。
• 函数组件构成：各种钩子函数+return()方法里面写页面布局。钩子函数是use开头的系列。

二、react函数组件常用的Hook

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

一、useState

1.定义：

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

写法如下：

const [ count , setCount ] = useState(0);

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

2.语法：

const [ count , setCount ] = useState(0);

1.useState的详细介绍：
useState(params) params是可以任意设置的 第一个参数的初始值 。设置数据类型以及自定义初始值
2.useState的两个参数的详细介绍：
count 是第一个参数解构出的第一个参数。是初始值 
setCount 是第二个参数 是一个函数。 用来设置更改count 的一个函数

二、useEffect

1.定义：

(1).什么是副作用?

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

写法如下：

useEffect(() => {},[])

(2).常见的副作用

• 数据请求 ajax发送
• 手动修改dom
• localstorage操作

(3).useEffect怎么获取真实的dom节点？ 

解决思路：使用useRef()

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

2.语法：

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

useEffect(() => {},[])

1.useEffect的两个参数的详细介绍：
接受2个参数，第一个是函数，第二个是数组
2.useEffect的第二个参数的详细介绍：
(1). 如果第二个参数数组为空: 只有第一次渲染。 它类比生命周期就是componentDidMount 
(2).如果二个参数数组不为空： 类比监听，只要里面的设置的值改变，它就渲染。 它类比生命周期就是componentDidUpdate 
3.useEffect的第一个参数的详细介绍：
(1).常用：在第一个参数内部定义副作用的具体操作。
(2).卸载组件，卸载副作用，包括定时器、网络请求等异步任务，以此达到减少耗能。
useEffect 内部 最外层 支持return () => 相当于 componentWillUnmount 卸载 当离开当前组件的时候触发 并且 每次更新都触发。

三、useRef

1.定义：

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

写法如下：

const myRef = useRef()

2.ref的拿取：callbackRef

const myRef = useRef()  //声明一个ref，自定义命名为myRef

myRef.current  //通过自定义命名.current，可以拿到此节点

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

3.ref的使用步骤

1.首先声明；

2.其次，通过自定义命名.current获取值，或者更改值；

3.最后，在html页面布局中，通过ref={自定义命名}绑定真实的dom节点。

核心代码如下： 

const myRef = useRef()
myRef.current = 赋值
render/return (...)
 

四、useCallback

使用useCallback来包装函数

具体解释：不是为了性能优化。而是为了不生成新的回调函数，让diff对比时发现差异，不会 再次执行回调。

五、其它

(一)、useState和useEffect的相同点： useState 和 useEffect 支持写多个

案例省略

(二)、react函数组件在页面组件中，发起网络请求的方式：

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

 核心代码，如下所示：

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

(三)、vue框架有虚拟dom，react框架有虚拟dom吗？

react框架有虚拟dom的概念，并且是它最先提出来的！

(四)、react框架的类组件和函数组件的区别？官方更推荐哪种写法？

官方更加推荐函数组件的写法，其衍生很多内置的Hook，以达到便于开发，便于码农书写代码。

• 类组件有生命周期这个说法
• 函数组件没有生命周期这个说法

react函数组件没有生命周期，但是用法可以类比到生命周期去理解。参考链接如下：react函数组件没有生命周期