|
使用React 你永远避不开的就是hooks?
?Hook 概览 – React 这里是官方介绍 下面 我会按照自己的理解与总结 介绍Hooks
Hooks
按照官方说法 ?Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
主要作用 :为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能
注意点 :?
Hooks 只能在函数组件中使用
可以理解为通过 Hooks 为函数组件钩入 class 组件的特性
hooks的使用策略:
react没有计划从React中移除class
Hook 和现有代码可以同时工作，你可以渐进式地使用：
不推荐直接使用 Hooks 大规模重构现有组件
推荐新功能用 Hooks，复杂功能实现不了的，也可以继续用 class
找一个功能简单、非核心功能的组件开始使用 hooks
class 组件相关的 API 在hooks中可以不用
state与setState
钩子函数，componentDidMount、componentDidUpdate、componentWillUnmount
`this 相关的法
Hooks之useState
作用:能够使用useState为函数组件提供状态
步骤 :?
1 导入 useState 函数
import { useState } from 'react'
?2?调用?useState?函数，传入初始值，返回状态和修改状态的函数
const [state, setState] = useState(数据类型)
? 3 使用
-
在 JSX 中展示状态 -
特定的时机调用修改状态的函数来改状态
return (
<div>
{/* 展示状态值 */}
<h1>useState Hook -> {state}</h1>
{/* 点击按钮，让状态值 +1 */}
<button onClick={() => setState(state + 1)}>+1</button>
</div>
)
注意:?
1 状态初始值 此处的状态可以是任意值（比如，数值、字符串等），而 class 组件中的 state 必须是对象
2 返回值: 数组，包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
?useState 两种格式
格式1：传入值
useState(0) useState('abc')
会存在合并问题
格式2：传入回调
useState((上一次的值 ) => { return 新值 })
回调函数的返回值就是状态的当前值
回调函数只会触发一次
必须要有返回值!!!
?状态更新:
整个组件的逻辑重新运行一次
useState只会在组件第一次渲染时使用状态的初值，随后都会使用状态的最新值
Hooks之useEffect 副作用
理解: 事物的主要作用之外的，就是副作用。
对于react组件来说，除了渲染UI之外的其他操作，都可以称之为副作用。
作用:?
数据（Ajax）请求、手动修改 DOM、开启定时器，清空定时器，添加事件监听，删除事件, localStorage 操作等
useEffect的依赖项:
useEffect有两个参数：
参数1： 副作用函数。
参数2：执行副作用函数的依赖项：它决定了什么时机执行参数1（副作用函数）
情况1：不带第二个参数。执行时机：每次更新之后都要执行?
组件挂载时相当于 componentDidMount
组件更新相当于componentDidUpdate
?
import React, { useEffect } from 'react' //导入
useEffect(() => {
// 副作用函数的内容
})
情况2：带第二个参数，参数是空数组。执行时机：只执行第一次 ??
组件挂载相当于componentDidMount??组件更新不执行
useEffect(() => {
// 副作用函数的内容
}, [])
情况3：带第二个参数（数组格式），并指定了依赖项。执行时机：（1）初始执行一次 （2）依赖项的值变化了，执行一次
useEffect(() => {
// 副作用函数的内容
}, [依赖项1,依赖项2,....])
情况4:?第一个参数返回一个函数 俗称清理函数用来清理副作用?
useEffect(() => {
return () => {
// 副作用函数的清理函数，模拟 componentWillUnMount
}
}, [])
?Hooks之useRef-操作DOM
理解
?useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数?
? 返回的 ref 对象在组件的整个生命周期内持续存在。
? useRef 会在每次渲染时返回同一个 ref 对象
变更 .current 属性不会引发组件重新渲染
简单理解 useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
?
import React, { useRef } from 'react' //导入
const inputRef = useRef(null)
使用场景 俩种情况
第一种 获取dom 操作dom 或者组件
第二种 存储数据
Hooks之 useContext-全局状态
使用步骤
1 导入并调用createContext方法，得到Context对象，导出
import { createContext } from 'react'
export const Context = createContext()
2?使用?Provider?组件包裹根组件，并通过?value?属性提供要共享的数据
return (
<Context.Provider value={ 这里放要传递的数据 }>
<根组件的内容/>
</Context.Provider>
)
3?在任意后代组件中，如果希望获取公共数据：
导入useContext；调用useContext(第一步中导出的context) 得到value的值
import React, { useContext } from 'react'
import { Context } from './index'
const 函数组件 = () => {
const 公共数据 = useContext(Context)
return ( 函数组件的内容 )
}
Hooks之自定义hooks
作用:自定义 Hooks 针对不同组件实现不同状态逻辑复用
限制:
自定义 Hooks 是一个函数，约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks
Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！
自定义 Hooks 用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值（就像使用普通函数一样）
使用场景
将组件状态逻辑提取到可重用的函数（自定义 Hooks）中，实现状态逻辑复用。
Hooks自定义算是比较一种高阶的写法 有空 我在整理一些实际开发中 可以封装的hooks?
对于想要深入了解的伙伴 下面链接中深入了解学习
|