React学习day04-useEffect、自定义Hook函数

本文主要是介绍React学习day04-useEffect、自定义Hook函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

11、useEffect（一个React Hook函数）

（1）作用：用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求，更改DOM等（即：视图渲染完后会触发一些事件）

（2）语法：（useEffect（（）=>{}，[]））

        1）参数1是一个函数，也叫副作用函数，可在其内部放置执行的操作

        2）参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数  的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后，执行一次

（3）示例（使用useEffect为list赋值）

已知：

        1）导入

        2）使用useEffect赋值

        3）效果

（4）useEffect依赖项

已知：

        1）没有依赖项：副作用函数在（组件初始渲染+组件更新）时执行

组件初始渲染：

组件更新：

        2）空数组依赖：副作用函数在（只在组件初始渲染）时执行

（当组件更新后不再执行）

        3）添加特定依赖项：副作用函数在（组件初始渲染+特性依赖项变化）时执行

初始：

依赖项变化（+1之后）：

（5）useEffect清除副作用

        1）副作用操作：在useEffect中编写的由渲染本身引起的对接组件外部的操作

        2）清除副作用：比如清除useEffect中开启的定时器，在组件卸载时清除该定时器，这个过程，叫清除副作用

        3）清除副作用函数的执行时机：在组件卸载时自动执行

        4）示例（清除useEffect中的定时器）：

已知：

12、自定义Hook函数

（1）概念：以use开头的函数

（2）作用：实现逻辑的封装和复用

（3）使用规则

        1）只能在组件中或者其他自定义Hook函数中调用，不能在文件最顶层使用

        2）只能在组件的顶层调用，不能嵌套在if、for、其他函数中

（4）语法步骤（以实现组件的动态切换显示与隐藏为例）：

（不封转实现）

        1）声明一个以use开头的函数

        2）在函数内封装可复用的代码

        3）将组件中需要用到的状态或回调return出去

        4）使用以use开头的函数（在需要使用状态或回调的组件内解构出相应的状态和回调函数）

这篇关于React学习day04-useEffect、自定义Hook函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---