react hooks setstate回调（【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext）
前言
博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻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 AppuseEffect - 发送网络请求
使用场景
如何在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传过来的数据是：10Context如果要传递的数据 ，只需要在整个应用初始化的时候传递一次就可以 ，就可以选择在入口文件index.js里通过Provider 提供数据 。
Context如果需要传递数据并且将来还需要再对数据做修改 ，底层组件也需要跟着一起变 ，就可以在顶层组件那里通过Provider 提供数据 。
今天的分享就到这里啦✨
\textcolor{red}{今天的分享就到这里啦✨}
今天的分享就到这里啦✨原创不易 ，还希望各位大佬支持一下
\textcolor{blue}{原创不易 ，还希望各位大佬支持一下}
原创不易 ，还希望各位大佬支持一下🤞
点赞 ，你的认可是我创作的动力！
\textcolor{green}{点赞 ，你的认可是我创作的动力！}
点赞 ，你的认可是我创作的动力！⭐️
收藏 ，你的青睐是我努力的方向！
\textcolor{green}{收藏 ，你的青睐是我努力的方向！}
收藏 ，你的青睐是我努力的方向！✏️
评论 ，你的意见是我进步的财富！
\textcolor{green}{评论 ，你的意见是我进步的财富！}
评论 ，你的意见是我进步的财富！创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！