React hooks知识总结

使用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 使用

1. 在 JSX 中展示状态

2. 特定的时机调用修改状态的函数来改状态

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: 第一个参数返回一个函数 俗称清理函数用来清理副作用 

• 清理函数会在组件卸载时以及下一次副作用函数调用之前执行

• 相当于componentWillUnmount

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 

对于想要深入了解的伙伴 下面链接中深入了解学习