前言
博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻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}{评论，你的意见是我进步的财富！}
评论，你的意见是我进步的财富！