【React从0开始】Hooks篇

笔记为React入门到实战(2022全网最新）课程笔记

Hooks基础

Hooks是一套能够使函数组件更强大，更灵活的“钩子”。

Hooks为函数组件提供了状态，更有利于逻辑拆分与重用的组件表达形式。类组件比较庞大，不如函数组件灵活方便。

useSatate

const [count, setCount] = useState(0)
返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
📣注意
a. 只能出现在函数组件或者其他hook函数中
b. 不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）

useEffect

为React函数组件提供副作用处理。

其实React使用函数组件编程就很适合函数式编程。函数式编程的核心思想就是强调使用纯函数，尽量避免副作用。

• 纯函数：指对于给定的输入，函数总返回相同的输出。不改变外部的状态，也不依赖外部状态。
• 副作用：对其他地方产生影响或改变程序状态的部分。

函数式编程推崇将副作用限制在程序的某些特定部分，通常是在程序的边界处，例如在与外部世界交互的地方。这些边界部分负责处理副作用，而程序的核心逻辑则尽量保持纯净。
useEffect钩子的主要目的是用于隔离副作用。副作用通常为：

1. 数据获取：您可以在 useEffect 中发起 HTTP 请求或从其他数据源获取数据，而不会阻塞组件的渲染。一旦数据可用，您可以更新组件的状态。

2. 订阅事件：您可以使用 useEffect 订阅外部事件，如WebSocket消息、DOM事件或全局事件。这使得您可以响应事件的发生而不阻塞渲染。

3. 手动操作DOM：有时需要直接操作DOM元素，例如添加或删除元素、更改样式等。useEffect 可以用于执行这些DOM操作。

4. 清理操作：useEffect 还可以用于清理操作，例如取消订阅事件、清除定时器或释放其他资源。这可以确保在组件卸载或重新渲染时不会留下未处理的副作用。

依赖项控制执行时机

1. 不添加依赖项

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

执行时机：

• 组件初始渲染
• 组件更新 （不管是哪个状态引起的更新）

2. 添加空数组
   组件只在首次渲染时执行一次

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

所以window.location.reload()刷新页面后，React重新初始化，副作用也重新执行。

3. 添加特定依赖项
   监控依赖数据。副作用函数在首次渲染时执行，在依赖项发生变化时重新执行。

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>    
        </>  
    )
}

4. 清理副作用

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

   注意执行时机为：

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

Hooks进阶

需要计算的初始值

useState中传入回调参数，return 计算后的初始值。

useEffect发送网络请求

在内部单独定义一个函数，然后把这个函数包装成同步

useEffect(async ()=>{    
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')   
    console.log(res)
},[])

useRef

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

获取dom

//创建ref对象
const h1Ref = useRef(null)
//在jsx上绑定ref
    return (    
        <div>      
            <h1 ref={ h1Ref }>this is h1</h1>    
        </div>  
    )

获取组件实例

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

使用Hooks实现透传

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