前言

博主主页👉🏻
专栏链接👉🏻
app开发定制公司上篇文章初步学习了
app开发定制公司今天来深入学习Hooksapp开发定制公司的一些扩展知识
app开发定制公司感兴趣的小伙伴一起来看看吧~🤞

-app开发定制公司回调函数的参数

使用场景

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

语法

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

语法规则

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

- 发送网络请求

使用场景

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

语法要求

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

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

正确写法

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

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

使用场景

在函数组件中获取真实的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
1
2
3
4
5
6
7
8
9
10
11
12
13

获取组件实例

函数组件由于没有实例，不能使用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>  )}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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传过来的数据是：10this is ConC app传过来的数据是：10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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

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

$今天的分享就到这里啦✨$

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

🤞 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$