react 函数组件 hook 更强大，更灵活的钩子函数

目录

hooks 优势

useState

useEffect

useRef

useContext

---

hooks 优势

1.告别了难以理解的class 组件

2.解决了业务逻辑，难以拆分的问题

3.方便了状态逻辑的复用

4.更加符合UI = F(data)的 设计哲学

useState

作用： 为函数组件提供了数据状态（state）

语法：

const [count,setCount] = useState(0)

count :数据状态 setCount:修改数据的对应方法。

重点注意事项：

1.useState的初始参数指挥再组件首次渲染的时候使用，再次使用会被忽略。

2.每次通过setCount 修改状态，函数组件都会重新加载。

3.useState可以多次调用，每次都是独立的。

4.useState不可以再除了函数组件之外的地方使用，比如分支语句，循环语句，内部函数。

5.如果useState初始值需要计算才能得到，可以使用回调函数写法来确定 useState的初始值

useEffect

作用：

为react组件提供副作用处理

什么是副作用？

函数组建的主要作用是通过数据渲染UI,除了这个之外的操作就是副作用

例如：1.ajax 2.手动修改dom 3. localstorage操作

依赖控制执行时机

1.默认状态首次执行+每次组件更新执行

2.添加 []  只在首次加载执行

3.添加特性的依赖项[count] 首次执行+ 依赖项变化执行

4.清理副作用 useEffect(()=>{return ()=>{}}) ,通过回调函数来进行清理

useRef

作用：获取真实dom或组件实例对象

实现步骤：

1.导入useRef函数

2.执行useRef函数并传入null返回值是一个对象，内部有一个current属性存放发到的dom对象（组件实例）

3.通过ref绑定要获取的元素组件。

useContext

作用：

在hooks下 如何跨组件传数据

实现步骤：

1.使用creatContext创建context对象

2.在顶层使用provider提供数据

3.在底层组件通过usecontext函数获取数据