!
也想出现在这里? 联系我们
广告区块

【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext

前言

博主主页??蜡笔雏田学代码
专栏链接??React专栏
上篇文章初步学习了Hooks的基础知识
今天来深入学习Hooks的一些扩展知识
感兴趣的小伙伴一起来看看吧~?

【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext

useState –回调函数的参数

使用场景

参数只会在组件的初始渲染中起作用,后续渲染时会被忽略。如果初始 state 需要通过计算才能获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调用。

语法

const [name, setName] = useState(()=>{   
  // 编写计算逻辑    return '计算之后的初始值'
})

语法规则

  1. 回调函数return出去的值将作为 name 的初始值
  2. 回调函数中的逻辑只会在组件初始化的时候执行一次

语法选择

  1. 如果就是初始化一个普通的数据 直接使用 useState(普通数据) 即可
  2. 如果要初始化的数据无法直接得到需要通过计算才能获取到,使用useState(()=>{})

代码

import { useState } from 'react'

function Counter(props) {
  const [count, setCount] = useState(() => {
    return props.count
  })
  return (
    div>
      button onClick={() => setCount(count + 1)}>{count}/button>
    /div>
  )
}

function App() {
  return (
    >
      Counter count={10} />
      Counter count={20} />
    />
  )
}

export default App

useEffect – 发送网络请求

使用场景

如何在useEffect中发送网络请求,并且封装同步 async await操作

语法要求

不可以直接在useEffect的回调函数外层直接包裹 await ,因为异步会导致清理函数无法立即返回

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

正确写法

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

useEffect(() => {
  //  发送请求
  async function loadData() {
    const res = await fetch('http://geek.itheima.net/v1_0/channels')
    console.log(res)
  }
  loadData()
}, [])

useRef

使用场景

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

使用步骤

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

获取dom

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

获取组件实例

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

import React, { useRef } from 'react'
class TeastC extends React.Component {
  render() {
    return (
      div>我是类组件/div>
    )
  }
}

function App() {
  const testRef = useRef(null)

  useEffect(() => {
    console.log(testRef.current)
  })
  // useEffect回调 是在dom渲染之后还是之前执行? 之后!
  return (
    div>
      TeastC ref={testRef} />
    /div>
  )
}

useContext

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

在hooks下如何跨组件传数据

实现步骤

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

代码实现

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

function ConA() {
  // 底层组件通过useContext函数获取数据 
  const count = useContext(Context)
  return (
    div>
      this is ConA
      app传过来的数据是:{count}
      ConC />
    /div>
  )
}

function ConC() {
  // 底层组件通过useContext函数获取数据 
  const count = useContext(Context)
  return (
    div>
      this is ConC
      app传过来的数据是:{count}
    /div>
  )
}

function Demo() {
  const [count, setCount] = useState(10)
  return (
    // 顶层组件通过Provider 提供数据 
    Context.Provider value={count}>
      div>
        ConA />
        button onClick={() => { setCount(count + 1) }}>+/button>
				//提供方修改count数据之后,使用方也会更新这个数据
      /div>
    /Context.Provider>
  )
}
//打印结果: 
this is ConA app传过来的数据是:10
this is ConC app传过来的数据是:10

Context如果要传递的数据,只需要在整个应用初始化的时候传递一次就可以,就可以选择在入口文件index.js里通过Provider 提供数据。

Context如果需要传递数据并且将来还需要再对数据做修改,底层组件也需要跟着一起变,就可以在顶层组件那里通过Provider 提供数据。

今天的分享就到这里啦✨

\textcolor{red}{今天的分享就到这里啦✨}

今天的分享就到这里啦

原创不易,还希望各位大佬支持一下

\textcolor{blue}{原创不易,还希望各位大佬支持一下}

原创不易,还希望各位大佬支持一下

?

点赞,你的认可是我创作的动力!

\textcolor{green}{点赞,你的认可是我创作的动力!}

点赞,你的认可是我创作的动力!

⭐️

收藏,你的青睐是我努力的方向!

\textcolor{green}{收藏,你的青睐是我努力的方向!}

收藏,你的青睐是我努力的方向!

✏️

评论,你的意见是我进步的财富!

\textcolor{green}{评论,你的意见是我进步的财富!}

评论,你的意见是我进步的财富!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xuxuii/article/details/126225877
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索