【前端进阶】React-hooks

hooks

什么是 hooks

Hooks： 直意钩子,可以让函数组件里“钩入” React 的状态 state 及生命周期等特性的函数。

hooks 的作用

• 为函数组件提供状态、生命周期
• 组件的状态逻辑复用
• 解决 class 组件自身的问题
• Hooks 只能在函数组件中使用

class 组件自身的问题

根据状态来渲染UI时 class 组件不能发挥它最重要的功能

• 组件之间很少继承
• 组件之间很少通讯
• 通用逻辑不好复用

hooks 配合函数式组件的好处

• 函数本身比较简单，更适合根据状态来渲染UI
• hooks 让函数组件内部有了操作维护状态的能力
• hooks 带来了组件的逻辑复用能力

hooks 的常用 API

1 . useState

作用 : useState可以为函数组件提供状态

useState 的使用:

1. 导入 useState函数 , import React {useState} from 'react'
2. 调用 useState() 方法 , const [count,steCount] = useState(数据初始值)

useState 的参数 : 状态初始值。

• 参数的两种格式
  • 格式1：传入值 useState(0) 或 useState('abc')
  • 格式2：传入回调 useState(() => { return 初始值 }) , 回调函数的返回值就是状态的当前值
• 注意：初始值可以是任意值（例: 数值、字符串等），而 class 组件中的 state 必须是对象

useState 的返回值 ： 是一个数组 [count,steCount]

• count : 状态,就是数据名
• stecount :修改状态的函数, 可以修改 count 的数据 ( 响应式 )
  • 注意: 修改状态的函数名称以 set 开头，后面跟上状态的名称
• setXXX 的参数有两个格式
  • setCount(100)
  • 函数式 setCount(count(上一次的值) => { 操作数据业务代码 return count(新值) }) 可以用来对 count 进行叠加

import React, { useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [count, setCount] = useState('')
  return (
    <div>
      {/* 展示状态值 */}
      <h1>useState Hook -> {content}</h1>
      {/* 点击按钮，让状态值 +1 */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

useState-处理表单元素

使用 :

1. 导入 useState 函数
2. 调用 useState() 方法 , const [count,steCount] = useState(数据)
3. render函数中使用 : <input value={content} onChange={(e) => setContent(e.target.value)} />

useState 的注意点

• useState 的初始值(参数)只会在组件第一次渲染时生效
• 为函数组件提供多个状态 , useState(状态1) useState(状态2) ,每调用一次 useState Hook 可以提供一个状态。
• useState 只能直接出现在函数组件内部
• useState 不能嵌套在 if 或者 for 语句中

2 . useEffect

useEffect 副作用 : 对于react组件来说，除了渲染UI之外的其他操作，都可以称之为副作用

函数式组件的作用划分:

• 主作用 ： 就是根据数据（state/props）渲染 UI
• 副作用 ： 数据（Ajax）请求、手动修改 DOM、开启定时器，清空定时器，添加事件监听，删除事件, localStorage 操作等

useEffect-基本使用

1. 导入 useEffect

• import { useEffect } from 'react'

2. 使用

useEffect(() => {
  // 副作用函数的操作
}, [依赖项,依赖项2...])

useEffect 两个参数

• 参数1 ： 回调函数, 操作副作用函数。
• 参数2 ： 数组, 执行副作用函数的依赖项, 决定了什么时机执行参数1（副作用函数）

useEffect 四种执行时机

情况1 : 不写第二个参数。

• 执行时机 ：render 函数执行执行之后, 每次状态改变都会执行
• 相当于 React 中的 componentDidmount 组件挂载后 + componentDidUpdate 组件更新后

情况2 : 第二个参数是空数组。

• 执行时机 ：初次 render 函数执行执行之后执行, 只执行一次,后续修改 DOM 不执行
• 相当于 React 中的 componentDidMount 组件挂载后
• 使用场景 ：1.事件绑定, 2.发送请求获取数据等。

情况3 : 带第二个参数（数组格式），并指定了依赖项。

• 执行时机：（1）初始执行一次 （2）依赖项的值变化了就会执行
• 相当于 Watcher 对依赖项进行监听

情况4 : useEffect 副作用函数的返回值,清理副作用

useEffect(() => {
  // 副作用函数的内容

  return （）=>{ /* 做清理工作*/ } // 清理函数
}, [])

• 清理函数的执行时机：
  • 清理函数会在组件卸载时以及下一次副作用函数调用之前执行
• 相当于 React 中的 componentWillUnmount 组件卸载

3 . useRef

使用场景 ： 在 React 中进行 DOM 操作时，用 useRef 来获取 DOM

作用 ：

• 使用用 useRef() 后 得到一个带有 current 属性的对象 , 可以用其操作 DOM

useRef 基本使用

1. 导入 useRef
   • import React, { useRef } from 'react'
2. 调用useRef(初值),得到引用对象
   • const 包含current的对象名 = useRef(null)
3. 把引用对象设置 ref 给任意的 组件/元素
   • <input ref={包含current的对象名} />
4. 通过引用对象.current 获取 组件/元素
   • 对象名.current.value 获取 input 的值

注意 :

• 参数：在获取 DOM 时，一般都设置为 null
• 调用 useRef 返回值：包含 current 属性的对象。
• 只要在 React 中进行 DOM 操作，都可以通过 useRef Hook 来获取 DOM（例 : 获取 DOM 的宽高等）。
• useRef 不仅仅可以用于操作 DOM，还可以操作组件

useRef 封装可共享数据

1. 导入 useRef
   • import React, { useRef } from 'react'
2. 调用useRef
   • 组件中使用 const timeRef = useRef(null)
3. 向引用的current中存入数据
   • timeRef.current = 需要在多次渲染之间共享的数据

4 . useContext

实现全局状态共享

useContext 使用步骤

1. 导入并调用 createContext 方法，得到 Context 对象

   import { createContext } from 'react'
   export const Context = createContext()
   

2. 使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据

   return (
     <Context.Provider value={ 这里放要传递的数据 }>
       <根组件的内容/>
     </Provider>
   )
   

3. 在后代组件中，导入 useContext 和 context

   • 调用 useContext(context) 得到 value 的值
   • context : 是第一步中导出的

   import React, { useContext } from 'react'
   import { Context } from './index'
   const 函数组件 = () => {
       const 公共数据 = useContext(Context)
       return ( 函数组件的内容 )
   }
   

自定义 hooks

自定义 hooks 的作用

除了使用内置的 Hooks 之外，还可以创建自定义 Hooks。自定义 Hooks 针对不同组件实现不同状态 逻辑复用。

自定义 hooks 特点 :

• 自定义 Hooks 是一个函数
  • 约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks
• Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！
• 自定义 Hooks 是用来实现组件的状态逻辑复用的，使用和普通封装函数一样

使用场景

复用的逻辑代码 , 提取到 Hooks 中单独封装, 使用时直接导入调用