SqlServer【HM-React】02. React底子-下 - Powered by Discuz! Archiver

钜形不锈钢水箱 发表于 2024-12-7 04:48:49

【HM-React】02. React底子-下

React表单控制

受控绑定

概念：使用React组件的状态（useState）控制表单的状态
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F17bcd5e1732b4eeda7df23f2ae042b70&pos_id=img-VllXeNyK-1733144591371
function App(){
const = useState('')
return (
<input
   type="text"
   value={value}
   onChange={e => setValue(e.target.value)}
/>
)
}
非受控绑定

概念：通过获取DOM的方式获取表单的输入数据
function App(){
const inputRef = useRef(null)

const onChange = ()=>{
console.log(inputRef.current.value)
}

return (
<input
   type="text"
   ref={inputRef}
   onChange={onChange}
/>
)
}
案例-B站批评案例

https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F881509d2c5a14c4ebd0673a72002a7ee&pos_id=img-PNkdW3L8-1733144540020

[*]手机输入框批评内容，并发布批评
[*]id处理和时间处理（uuid 和 day.js）
React组件通讯

概念：组件通讯就是组件之间的数据传递, 根据组件嵌套关系的不同，有不同的通讯本领和方法
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F8c08f3f6cbb04cf585eed3f0a1742405&pos_id=img-v3bHwhfV-1733144540020

[*]A-B 父子通讯
[*]B-C 兄弟通讯
[*]A-E 跨层通讯
父子通讯-父传子

https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2Feff953c29b384e779f6986903b0c34d0&pos_id=img-m0WZXGtG-1733144540020
底子实现

**实现步骤 **

[*]父组件传递数据 - 在子组件标签上绑定属性
[*]子组件吸收数据 - 子组件通过props参数吸收数据
function Son(props){
return <div>{ props.name }</div>
}

function App(){
const name = 'this is app name'
return (
<div>
   <Son name={name}/>
</div>
)
}
props说明

props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F9cbf87137cdd430bb40c3aad9eac772a&pos_id=img-jSGjYPlq-1733144540020
props是只读对象
子组件只能读取props中的数据，不能直接举行修改, 父组件的数据只能由父组件修改
特殊的prop-chilren

场景：当我们把内容嵌套在组件的标签内部时，组件会主动在名为children的prop属性中吸收该内容
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F094afa60288c4accb6c53d6976c747ce&pos_id=img-Pwt1XLMY-1733144540020
父子通讯-子传父

https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2Fe4bd274baa134da18ea8fd635b8bbcde&pos_id=img-f2XfF5WQ-1733144540021
核心思路：在子组件中调用父组件中的函数并传递参数
function Son({ onGetMsg }){
const sonMsg = 'this is son msg'
return (
<div>
   {/* 在子组件中执行父组件传递过来的函数 */}
   <button onClick={()=>onGetMsg(sonMsg)}>send</button>
</div>
)
}

function App(){
const getMsg = (msg)=>console.log(msg)

return (
<div>
   {/* 传递父组件中的函数到子组件 */}
   <Son onGetMsg={ getMsg }/>
</div>
)
}
兄弟组件通讯

https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F4c85bc62de0a466197936cb44f61f98f&pos_id=img-84dXcquS-1733144540021
实现思路: 借助状态提升机制，通过共同的父组件举行兄弟之间的数据传递

[*]A组件先通过子传父的方式把数据传递给父组件App
[*]App拿到数据之后通过父传子的方式再传递给B组件

// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B

import { useState } from "react"

function A ({ onGetAName }) {
// Son组件中的数据
const name = 'this is A name'
return (
<div>
   this is A compnent,
   <button onClick={() => onGetAName(name)}>send</button>
</div>
)
}

function B ({ name }) {
return (
<div>
   this is B compnent,
   {name}
</div>
)
}

function App () {
const = useState('')
const getAName = (name) => {
setName(name)
}
return (
<div>
   this is App
   <A onGetAName={getAName} />
   <B name={name} />
</div>
)
}

export default App
跨层组件通讯

https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2Fd5d5e6e0e41a495e90e0e343761111ce&pos_id=img-VVkAKEXY-1733144540021
实现步骤：

[*]使用 createContext方法创建一个上下文对象Ctx
[*]在顶层组件（App）中通过 Ctx.Provider 组件提供数据
[*]在底层组件（B）中通过 useContext 钩子函数获取消耗数据
// App -> A -> B

import { createContext, useContext } from "react"

// 1. createContext方法创建一个上下文对象

const MsgContext = createContext()

function A () {
return (
<div>
   this is A component
   <B />
</div>
)
}

function B () {
// 3. 在底层组件通过useContext钩子函数使用数据
const msg = useContext(MsgContext)
return (
<div>
   this is B compnent,{msg}
</div>
)
}

function App () {
const msg = 'this is app msg'
return (
<div>
   {/* 2. 在顶层组件通过Provider组件提供数据 */}
   <MsgContext.Provider value={msg}>
   this is App
   <A />
   </MsgContext.Provider>
</div>
)
}

export default App
React副作用管理-useEffect

概念理解

useEffect是一个React Hook函数，用于在React组件中创建不是由变乱引起而是由渲染自己引起的操作（副作用）, 比如发送AJAX请求，更改DOM等等
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2Fa94335b781c542b8858ae44e9007c2dc&pos_id=img-YUg5ePwz-1733144540021
:::warning
说明：上面的组件中没有发生任何的用户变乱，组件渲染完毕之后就需要和服务器要数据，整个过程属于“只由渲染引起的操作”
:::
底子使用

需求：在组件渲染完毕之后，立刻从服务端获取平道列表数据并显示到页面中
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F9399e47f14c440bba2fad07113166074&pos_id=img-DyGWZkkT-1733144540021
说明：

[*]参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
[*]参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次
:::warning
接口地址：http://geek.itheima.net/v1_0/channels
:::
useEffect依赖说明

useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现
依赖项副作用功函数的执行时机没有依赖项组件初始渲染 + 组件更新时执行空数组依赖只在初始渲染时执行一次添加特定依赖项组件初始渲染 + 依赖项变化时执行扫除副作用

概念：在useEffect中编写的由渲染自己引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清算掉，这个过程就是清算副作用
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2Ffdcbde8925c04170877cef39617dd024&pos_id=img-3zt2c9ka-1733144540021
:::warning
说明：扫除副作用的函数最常见的执行时机是在组件卸载时主动执行
:::
import { useEffect, useState } from "react"

function Son () {
// 1. 渲染时开启一个定时器
useEffect(() => {
const timer = setInterval(() => {
   console.log('定时器执行中...')
}, 1000)

return () => {
   // 清除副作用(组件卸载时)
   clearInterval(timer)
}
}, [])
return <div>this is son</div>
}

function App () {
// 通过条件渲染模拟组件卸载
const = useState(true)
return (
<div>
   {show && <Son />}
   <button onClick={() => setShow(false)}>卸载Son组件</button>
</div>
)
}

export default App
自定义Hook实现

概念：自定义Hook是以 use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2Fb5e302ef12424f0385931af0f3e4d80e&pos_id=img-QswcUQjt-1733144540021
// 封装自定义Hook

// 问题: 布尔切换的逻辑当前组件耦合在一起的不方便复用

// 解决思路: 自定义hook

import { useState } from "react"

function useToggle () {
// 可复用的逻辑代码
const = useState(true)

const toggle = () => setValue(!value)

// 哪些状态和回调函数需要在其他组件中使用 return
return {
value,
toggle
}
}

// 封装自定义hook通用思路

// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
// 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

function App () {
const { value, toggle } = useToggle()
return (
<div>
   {value && <div>this is div</div>}
   <button onClick={toggle}>toggle</button>
</div>
)
}

export default App
React Hooks使用规则

[*]只能在组件中大概其他自定义Hook函数中调用
[*]只能在组件的顶层调用，不能嵌套在if、for、别的的函数中
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F9f39efd890124b12a58675378d1f2cf9&pos_id=img-pSVAnbnb-1733144540021
案例-优化B站批评案例

https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fs1.vika.cn%2Fspace%2F2024%2F12%2F02%2F881509d2c5a14c4ebd0673a72002a7ee&pos_id=img-JkAt6fup-1733144540021

[*]使用请求接口的方式获取批评列表并渲染
[*]使用自定义Hook函数封装数据请求的逻辑
[*]把批评中的每一项抽象成一个独立的组件实现渲染

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

【HM-React】02. React底子-下