React Hooks

2022/11/23 笔记前端 React

React Hooks

Hooks概念理解

React体系里组件分为类组件和函数组件

经过多年的实战，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生

关键点:

有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用
有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态
hooks只能在函数组件中使用

Hooks所解决问题

组件的逻辑复用
在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式
但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等
class组件自身的问题
class组件就像一个厚重的‘战舰’ 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的’快艇’

常用Hooks

useState

useState为函数组件提供状态（state）

基础使用

使用步骤

导入 useState 函数
调用 useState 函数，并传入状态的初始值
从useState函数的返回值中，拿到状态和修改状态的方法
在JSX中展示状态
调用修改状态的方法更新状态

代码实现

import { useState } from 'react'

function App() {
  // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
  // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

状态的读取和修改

读取状态

该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用

修改状态

setCount是一个函数，参数表示最新的状态值

调用该函数后，将使用新值替换旧值

修改状态后，由于状态发生变化，会引起视图变化

注意事项

修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型

组件的更新过程

组件第一次渲染
1. 从头开始执行该组件中的代码逻辑
2. 调用 useState(0) 将传入的参数作为状态初始值，即：0
3. 渲染组件，此时，获取到的状态 count 值为： 0
组件第二次渲染
- 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
- 组件重新渲染时，会再次执行该组件中的代码逻辑
- 再次调用 useState(0)，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
- 再次渲染组件，此时，获取到的状态 count 值为：1

注意事项

useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值

使用规则

useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态
useState 注意事项
- 只能出现在函数组件或者其他hook函数中
- 不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）
- 可以通过开发者工具查看hooks状态

useEffect

副作用函数

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

常见副作用

数据请求 ajax发送
手动修改dom
localstorage操作

useEffect函数的作用就是为react函数组件提供副作用处理的！

基础使用

使用步骤

导入 useEffect 函数
调用 useEffect 函数，并传入回调函数
在回调函数中编写副作用处理（dom操作）
修改数据状态
检测副作用是否生效

代码实现

import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
 
  useEffect(()=>{
    // dom操作
    document.title = `当前已点击了${count}次`
  })
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}

export default App

依赖项控制执行时机

不添加依赖项
组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行
- 组件初始渲染
- 组件更新（不管是哪个状态引起的更新）
```
useEffect(()=>{
    console.log('副作用执行了')
})
```

添加空数组

组件只在首次渲染时执行一次

useEffect(()=>{
     console.log('副作用执行了')
},[])

添加特定依赖项

副作用函数在首次渲染时执行，在依赖项发生变化时重新执行

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 
    
    useEffect(() => {    
        console.log('副作用执行了')  
    }, [count])  
    
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

注意事项

useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

清理副作用

如果想要清理副作用可以在副作用函数中的末尾return一个新的函数，在新的函数中编写清理副作用的逻辑

注意执行时机为：

组件卸载时自动执行

组件更新时，下一个useEffect副作用函数执行之前自动执行

import { useEffect, useState } from "react"


const App = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => {
      // 用来清理副作用的事情
      clearInterval(timerId)
    }
  }, [count])
  return (
    <div>
      {count}
    </div>
  )
}

export default App

useRef

在函数组件中获取真实的dom元素对象或者是组件对象

使用步骤

导入 useRef 函数
执行 useRef 函数并传入null，返回值为一个对象内部有一个current属性存放拿到的dom对象（组件实例）
通过ref 绑定要获取的元素或者组件

获取dom代码示例

import { useEffect, useRef } from 'react'
function App() {  
    const h1Ref = useRef(null)  
    useEffect(() => {    
        console.log(h1Ref)  
    },[])  
    return (    
        <div>      
            <h1 ref={ h1Ref }>this is h1</h1>    
        </div>  
    )
}
export default App

获取组件实例

函数组件由于没有实例，不能使用ref获取，如果想获取组件实例，必须是类组件

class Foo extends React.Component {  
    sayHi = () => {    
        console.log('say hi')  
    }  
    render(){    
        return <div>Foo</div>  
    }
}
    
export default Foo

import { useEffect, useRef } from 'react'
import Foo from './Foo'
function App() {  
    const h1Foo = useRef(null)  
    useEffect(() => {    
        console.log(h1Foo)  
    }, [])  
    return (    
        <div> <Foo ref={ h1Foo } /></div>  
    )
}
export default App

useContext

使用步骤

使用createContext 创建Context对象
在顶层组件通过Provider 提供数据
在底层组件通过useContext函数获取数据

代码实现

import { createContext, useContext } from 'react'
// 创建Context对象
const Context = createContext()

function Foo() {  
    return <div>Foo <Bar/></div>
}

function Bar() {  
    // 底层组件通过useContext函数获取数据  
    const name = useContext(Context)  
    return <div>Bar {name}</div>
}

function App() {  
    return (    
        // 顶层组件通过Provider 提供数据    
        <Context.Provider value={'this is name'}>     
            <div><Foo/></div>    
        </Context.Provider>  
    )
}

export default App

LOADING...

React Hooks

React Hooks

Hooks概念理解

Hooks所解决问题

常用Hooks

useState

基础使用

状态的读取和修改

组件的更新过程

使用规则

useEffect

副作用函数

基础使用

依赖项控制执行时机

清理副作用

useRef

useContext