前言

博主主页👉🏻蜡笔雏田学代码

专栏链接👉🏻React专栏

上篇文章初步学习了Hooks的基础知识

今天来深入学习Hooks的一些扩展知识

感兴趣的小伙伴一起来看看吧~🤞

useState -回调函数的参数

使用场景

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













，在函数中计算并返回初始的 state 
  
  
  
  
  
  
  ，此函数只在初始渲染时被调用  
  
  
  
  
  
  
 。

语法

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

语法规则

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

语法选择

如果就是初始化一个普通的数据 直接使用 useState(普通数据) 即可 如果要初始化的数据无法直接得到需要通过计算才能获取到
  
  
  
  
  
  
  
 ，使用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元素对象或者是组件对象

使用步骤

导入 useRef 函数 执行 useRef 函数并传入null
 

 

 

 

 

 

 

，返回值为一个对象 内部有一个current属性存放拿到的dom对象（组件实例） 通过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下如何跨组件传数据

实现步骤

使用createContext 创建Context对象 在顶层组件通过Provider 提供数据 在底层组件通过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}{评论               ，你的意见是我进步的财富！}

评论

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，你的意见是我进步的财富！