React Hooks

React Hooks

对函数型组件进⾏增强

React Hooks 介绍

React Hooks 是⽤来做什么的

对函数型组件进⾏增强, 让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒. 让开发者在不使⽤类组件的情况下, 实现相同的功能

类组件的不⾜

1. 缺少逻辑复⽤机制
   为了复⽤逻辑增加⽆实际渲染效果的组件，增加了组件层级 显示⼗分臃肿
   增加了调试的难度以及运⾏效率的降低
2. 类组件经常会变得很复杂难以维护
   将⼀组相⼲的业务逻辑拆分到了多个⽣命周期函数中
   在⼀个⽣命周期函数内存在多个不相⼲的业务逻辑
3. 类成员⽅法不能保证this指向的正确性

React Hooks 使用

Hooks 意为钩⼦, React Hooks 就是⼀堆钩⼦函数, React 通过这些钩⼦函数对函数型组件进⾏增强,
不同的钩⼦函数提供了不同的功能.

useState()
useEffects()
useReducer()
useRef()
useCallback()
useContext()
useMemo()

useState()
⽤于为函数组件引⼊状态

设置状态⽅法的使⽤细节

useState()

1. 接收唯⼀的参数即状态初始值. 初始值可以是任意数据类型.
2. 返回值为数组. 数组中存储状态值和更改状态值的⽅法. ⽅法名称约定以set开头, 后⾯加上状态名称.
3. ⽅法可以被调⽤多次. ⽤以保存不同状态值.
4. 参数可以是⼀个函数, 函数返回什么, 初始状态就是什么, 函数只会被调⽤⼀次, ⽤在初始值是动态值的情况.

useState只会在渲染时执行，不会执行多次

设置状态方法的细节

1. 设置状态值⽅法的参数可以是⼀个值也可以是⼀个函数
2. 设置状态值⽅法的⽅法本身是异步的

useReducer 钩⼦函数

useReducer是另⼀种让函数组件保存状态的⽅式

useContext 钩⼦函数

在跨组件层级获取数据时简化获取数据的代码

useEffect 钩⼦函数

让函数型组件拥有处理副作⽤的能⼒. 类似⽣命周期函数.

1. useEffect 执⾏时机
   可以把 useEffect 看做 componentDidMount, componentDidUpdate 和 componentWillUnmount 这三个函数的组合.
   useEffect(() => {}) => componentDidMount, componentDidUpdate
   useEffect(() => {}, []) => componentDidMount
   useEffect(() => () => {}) => componentWillUnMount

2. useEffect 使⽤⽅法
   2.1. 为window对象添加滚动事件
   2.2. 设置定时器让count数值每隔⼀秒增加1
   
   
   

3. useEffect 解决的问题
   3.1. 按照⽤途将代码进⾏分类 (将⼀组相⼲的业务逻辑归置到了同⼀个副作⽤函数中)
   3.2. 简化重复代码, 使组件内部代码更加清晰

4. 只有指定数据发⽣变化时触发effect,根据第二个参数进行数据监测

5. useEffect 结合异步函数
   useEffect中的参数函数不能是异步函数, 因为useEffect函数要返回清理资源的函数, 如果是异步函数就变成了返回Promise

异步函数需要是函数自执行方式

useMemo()

1. useMemo 的⾏为类似Vue中的计算属性, 可以监测某个值的变化, 根据变化值计算新值.
2. useMemo 会缓存计算结果. 如果监测值没有发⽣变化, 即使组件重新渲染, 也不会重新计算.
   此⾏为可以有助于避免在每个渲染上进⾏昂贵的计算
   
   

memo ⽅法

性能优化, 如果本组件中的数据没有发⽣变化, 阻⽌组件更新. 类似类组件中的 PureComponent 和 shouldComponentUpdate

useCallback钩子函数

性能优化, 缓存函数, 使组件重新渲染时得到相同的函数实例.

useRef 钩⼦函数

1.获取DOM元素对象

2.保存数据 (跨组件周期)
即使组件重新渲染, 保存的数据仍然还在. 保存的数据被更改不会触发组件重新渲染

自定义Hook

⾃定义 Hook 是标准的封装和共享逻辑的⽅式.
⾃定义 Hook 是⼀个函数, 其名称以 use 开头.
⾃定义 Hook其实就是逻辑和内置 Hook 的组合.

⾃定义 Hook 函数实例

function useGetPost() {
   
  const [post,setPost] = useState({
   })
  useEffect(()=>{
   
    axios.get('https://jsonplacehodler.typeicode.com/posts/1').then(res=>setPost(res.data))
  },[])
  return [post,setPost]
}


引用

const [post,setPost] = useGetPost()

增加表单元素的共享逻辑

import React,{
   useState} from 'react'
function useUpdateInput (initialVaIue) {
   
    const [value, setValue] = useState( initialValue); 
    return {
   
    value,
    onChange: event =>