永州网站建设收费情况,中文网站建设中模板,怎么建设食品网站,wordpress搬家后 localhost黑马React: 基础2
Date: November 16, 2023 Sum: 受控表单绑定、获取DOM、组件通信、useEffect、Hook、优化B站评论 受控表单绑定
受控表单绑定
概念#xff1a;使用React组件的状态#xff08;useState#xff09;控制表单的状态 准备一个React状态值
const [value, se…黑马React: 基础2
Date: November 16, 2023 Sum: 受控表单绑定、获取DOM、组件通信、useEffect、Hook、优化B站评论 受控表单绑定
受控表单绑定
概念使用React组件的状态useState控制表单的状态 准备一个React状态值
const [value, setValue] useState()通过value属性绑定状态通过onChange属性绑定状态同步的函数
inputtypetextvalue{value}onChange{(e) setValue(e.target.value)}
/Case:
Code:
// 受控绑定表单import { useState } from react// 1. 声明一个react状态 - useState// 2. 核心绑定流程// 1. 通过value属性绑定 react 状态// 2. 绑定 onChange 事件 通过事件参数e拿到输入框最新的值 反向修改到react状态function App() {const [value, setValue] useState()return (div classNameAppinput typetext value{value}onChange{(e) setValue(e.target.value)}//div)
}export default AppRes: React中获取DOM
在 React 组件中获取/操作 DOM需要使用 useRef React Hook钩子函数分为两步
使用useRef创建 ref 对象并与 JSX 绑定
const inputRef useRef(null)
input typetext ref{inputRef} /在DOM可用时通过 inputRef.current 拿到 DOM 对象
console.log(inputRef.current)Case:
Code:
import React, { useRef } from react
// React中获取DOM// 1. useRef生成ref对象, 绑定到dom标签身上
// 2. dom可用时, ref.current获取dom对象// 渲染完毕之后dom生成之后可用function App() {const inputRef useRef(null)const showDom () {console.log(inputRef.current)}return (div classNameAppinput typetext ref{inputRef}/button onClick{ () showDom() }获取DOM/button/div)
}export default AppRes: 案例B站评论—发表评论
B站评论案例 —— 核心功能实现 获取评论内容点击发布按钮发布评论
Code:
获取评论内容
const [content, setContent] useState()...{/* 评论框 */}
textareaclassNamereply-box-textareaplaceholder发一条友善的评论ref{inputRef}value{content}onChange{(e) setContent(e.target.value)}
/点击发布按钮发布评论
const handlPublish () {setCommentList([...commentList,{rpid: uuidV4(), // 随机iduser: {uid: 30009257,avatar,uname: 黑马前端,},content: content,ctime: dayjs(new Date()).format(MM-DD hh:mm), // 格式化 月-日 时:分like: 66,}])// 1. 清空输入框的内容setContent()// 2. 重新聚焦 dom(useRef) - focusinputRef.current.focus()
}...div classNamereply-box-senddiv classNamesend-text onClick{handlPublish}发布/div
/divB站评论案例 — id处理和时间处理 rpid要求一个唯一的随机数id - uuidctime要求以当前时间为标准生成固定格式 - dayjs
Code:
import { v4 as uuidV4 } from uuid
import dayjs from dayjs...{rpid: uuidV4(), // 随机iduser: {uid: 30009257,avatar,uname: 黑马前端,},content: content,ctime: dayjs(new Date()).format(MM-DD hh:mm), // 格式化 月-日 时:分like: 66,
}理解
1-uuid会生成一个随机数
在component中查看 2-日期格式化
dayjs.format() // 具体参考以下文档Ref:
随机数uuid: https://github.com/uuidjs/uuid
日期dayjs: https://dayjs.gitee.io/zh-CN/ B站评论案例 — 清空内容并重新聚焦 清空内容 - 把控制input框的value状态设置为空串重新聚焦 - 拿到input的dom元素调用focus方法
Code:
const handlPublish () {setCommentList([...commentList,{rpid: uuidV4(), // 随机iduser: {uid: 30009257,avatar,uname: 黑马前端,},content: content,ctime: dayjs(new Date()).format(MM-DD hh:mm), // 格式化 月-日 时:分like: 66,}])// 1. 清空输入框的内容setContent()// 2. 重新聚焦 dom(useRef) - focusinputRef.current.focus()
}...{/* 评论框 */}
textareaclassNamereply-box-textareaplaceholder发一条友善的评论ref{inputRef} // 给评论框绑定个ref标签, 方便获取value{content}onChange{(e) setContent(e.target.value)}
/组件通信
理解组件通信
概念组件通信就是组件之间的数据传递根据组件嵌套关系的不同有不同的通信方法 父传子-基础实现 实现步骤:
父组件传递数据 - 在子组件标签上绑定属性子组件接收数据 - 子组件通过props参数接收数据
Case:
Code:
// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接受数据 props的参数function Son(props) {console.log(props);return divthis is Son, {props.name}/div
}function App() {const name this is app namereturn (div classNameAppSon name{name} //div)
}export default AppRes: 父传子-props说明
props可传递任意的数据
数字、字符串、布尔值、数组、对象、函数、JSX props是只读对象
子组件只能读取props中的数据不能直接进行修改, 父组件的数据只能由父组件修改 父传子 - 特殊的prop children
场景当我们把内容嵌套在子组件标签中时父组件会自动在名为children的prop属性中接收该内容
Case:
Code:
// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接受数据 props的参数function Son(props) {console.log(props);return divthis is Son, {props.children}/div
}function App() {return (divSonspanthis is span/span/Son/div)
}export default AppRes: 父子组件通信-子传父 核心思路在子组件中调用父组件中的函数并传递参数 Case:
Code:
// 子传父
// 核心: 在子组件中调用父组件中的函数并传递实参import { useState } from react;function Son({onGetMsg}) {// Son组件中的数据const sonMsg this is son msgreturn (divbutton onClick{() onGetMsg(sonMsg)}sendMsg/button/div)
}function App() {const [msg, setMsg] useState()const getMsg (msg) {console.log(msg);setMsg(msg)}return (divFather: { msg }Son onGetMsg{getMsg}//div)
}export default AppRes: 使用状态提升实现兄弟组件通信
实现流程: 实现思路借助“状态提升”机制通过父组件进行兄弟组件之间的数据传递
A组件先通过子传父的方式把数据传给父组件AppApp拿到数据后通过父传子的方式再传递给B组件
Case:
// 兄弟组件传递// 1. 通过子传父 A App ✅
// 2. 通过父传子 App B import { useState } from react;function A({ onGetAName }) {const name this is A namereturn (divthis is A component: button onClick{() onGetAName(name)}send/button/div)
}function B(props) {return (divthis is B component: {props.name}/div)
}function App() {const [name, setName] useState()const getAName (name) {setName(name)}return (divh1Father: /h1A onGetAName{getAName} /B name{name} //div)
}export default AppRes: 使用Context机制跨层级组件通信
图示: 实现步骤
使用createContext方法创建一个上下文对象Ctx在顶层组件App中通过 Ctx.Provider 组件提供数据在底层组件B中通过 useContext 钩子函数获取消费数据 Case: Code:
// Context跨层通信
// App A B// 1. createContext方法创建一个上下文对象// 2. 在顶层组件 通过Provider组件提供数据
// 3. 在底层组件 通过useContext钩子函数使用数据import { createContext, useContext } from react;const MsgContext createContext()function A() {return (divthis is A component B //div)
}function B() {const msg useContext(MsgContext)return (divthis is B component - { msg }/div)
}function App() {const msg this is app msgreturn (divMsgContext.Provider value{msg}this is AppA //MsgContext.Provider/div)
}export default AppRes: useEffect 的使用
useEffect 的概念理解
useEffect是一个React Hook函数用于在React组件中创建不是由事件引起而是由渲染本身引起的操作副作用,比如发送AJAX请求更改DOM等等 说明上面的组件中没有发生任何的用户事件组件渲染完毕之后就需要和服务器要数据整个过程属于 “只由渲染引起的操作” useEffect 的基础使用
需求在组件渲染完毕之后立刻从服务端获取频道列表数据并显示到页面中
语法
useEffect(() {}, [])参数1是一个函数可以把它叫做副作用函数在函数内部可以放置要执行的操作
参数2是一个数组可选参在数组里放置依赖项不同依赖项会影响第一个参数函数的执行当是一个空数组的时候副作用函数只会在组件渲染完毕之后执行一次
接口地址http://geek.itheima.net/v1_0/channels
Case: Code:
import { useEffect, useState } from reactconst URL http://geek.itheima.net/v1_0/channelsfunction App() {// 创建一个状态数据const [list, setList] useState([])useEffect(() {// 额外的操作 获取频道列表async function getList() {const res await fetch(URL)const jsonRes await res.json()// console.log(list);setList(jsonRes.data.channels)}getList()}, [])return (div classNameApp{/* this is app - { list[0].name } */}ul{ list.map(item {return li key{ item.id }{ item.name }/li})}/ul/div)
}export default AppRes: useEffect 依赖项参数说明
useEffect副作用函数的执行时机存在多种情况根据传入依赖项的不同会有不同的执行表现
依赖项副作用函数执行时机没有依赖项目数组初始渲染组件更新时执行空数组依赖只在初始渲染时执行一次添加特定依赖项组件初始渲染 特性依赖项变化时执行
Case: 1. 没有依赖项
func: 点击按钮, 数字会逐渐加1
Code:
import { useEffect, useState } from reactfunction App() {// 1. 没有依赖项 初始 组件 更新const [count, setCount] useState(0)useEffect(() {console.log(副作用函数执行了);})const handleAdd () {setCount(count 1)}return (div classNameAppthis is appbutton onClick{ () handleAdd() } {count} /button/div)
}export default AppRes: Case2: 空数组依赖
Code:
import { useEffect, useState } from reactfunction App() {// 1. 没有依赖项 初始 组件 更新const [count, setCount] useState(0)useEffect(() {console.log(副作用函数执行了);})const handleAdd () {setCount(count 1)}return (div classNameAppthis is appbutton onClick{ () handleAdd() } {count} /button/div)
}export default AppRes: Case3: 添加特定依赖项
Code:
import { useEffect, useState } from reactfunction App() {// 3. 添加特定依赖项// 依赖于 count , 只要count变化, 就执行副作用函数const [count, setCount] useState(0)useEffect(() {console.log(副作用函数执行了);}, [count])const handleAdd () {setCount(count 1)}return (div classNameAppthis is appbutton onClick{ () handleAdd() } {count} /button/div)
}export default AppRes: useEffect — 清除副作用
在useEffect中编写的由渲染本身引起的对接组件外部的操作社区也经常把它叫做副作用操作比如在useEffect中开启了一个定时器我们想在组件卸载时把这个定时器再清理掉这个过程就是清理副作用
useEffect(() {// 实现副作用操作逻辑return () {// 清除副作用逻辑...}
}, [])说明清除副作用的函数最常见的执行时机是在组件卸载时自动执行
需求在Son组件渲染时开启一个定制器卸载时清除这个定时器
Case:
func: 点击卸载, 定时器会停止
Code:
import { useEffect, useState } from react;function Son() {useEffect(() {const timer setInterval(() {console.log(定时器执行中...pilipala);}, 1000)return () {clearInterval(timer)}}, [])return divthis is son/div
}function App() {// 通过条件渲染模拟组件卸载const [show, setShow] useState(true)return (div{ show Son /}button onClick{() setShow(false)}卸载Son组件/button/div)
}export default AppRes: 自定义Hook实现
自定义Hook函数
概念自定义Hook是以 use 打头的函数通过自定义Hook函数可以用来实现逻辑的封装和复用 Case:
func: 切换 显示/隐藏 组件
Code:
// 封装自定义 Hook// 问题: 布尔切换的逻辑 当前组件耦合在一块时, 不方便复用
// 解决思路: 自定义Hookimport { useState } from reactfunction useToggle() {// 可复用逻辑代码const [value, setValue] useState(true)const handleToggle () {setValue(false)}// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value, handleToggle}
}// 封装自定义hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑 (只要是可复用的逻辑)
// 3. 把组件中用到的状态或者回调returan出去(以对象或者数组)
// 4. 在哪个组件中要用到这个逻辑, 就调用这个自定义hook, 结构出来状态和回调进行使用function App() {const { value, handleToggle } useToggle()return (div classNameApp{ value divthis is div/div}button onClick{() handleToggle()}toggle/button/div)
}export default AppRes: React Hooks使用规则
使用规则: 只能在组件中或者其他自定义Hook函数中调用 只能在组件的顶层调用不能嵌套在 if、for、其他函数中 理解: 就是Hooks不能有条件地执行, 只能直接在顶部采用const { value, handleToggle } useToggle() 这种方式, 直接调用 案例优化B站评论案例
优化需求 使用请求接口的方式获取评论列表并渲染使用自定义Hook函数封装数据请求的逻辑把评论中的每一项抽象成一个独立的组件实现渲染 优化需求-通过接口获取评论列表 使用 json-server 工具模拟接口服务, 通过 axios 发送接口请求 json-server是一个快速以.json文件作为数据源模拟接口服务的工具 axios是一个广泛使用的前端请求库
# -D 指安装到开发时依赖
npm i json-server -D使用 useEffect 调用接口获取数据
useEffect(() {// 发送网络请求...
}, [])拓展:
json-server
使用步骤:
1-安装(参考视频)
2-配置 package.json
scripts: {start: react-scripts start,build: react-scripts build,test: react-scripts test,eject: react-scripts eject,serve: json-server db.json --port 3004 // 添加 json-server 的端口
},参考:
json-server: https://github.com/typicode/json-server 优化需求-自定义Hook函数封装数据请求
一般思路
编写一个 use 打头的函数函数内部编写封装的逻辑return出去组件中用到的状态和方法组件中调用函数解构赋值使用
function useGetList () {// 获取接口数据渲染const [commentList, setCommentList] useState([])useEffect(() {// 请求数据async function getList () {// axios请求数据const res await axios.get( http://localhost:3004/list)setCommentList(res.data)}getList()}, [])return {commentList,setCommentList}
}...const [commetList, setCommetList] useGetList()优化需求-封装评论项Item组件 抽象原则App作为“智能组件”负责数据的获取Item作为“UI组件”负责数据的渲染
// 封装Item组件
function Item ({ item, onDel }) {return (div classNamereply-item{/* 头像 */}div classNameroot-reply-avatardiv classNamebili-avatarimgclassNamebili-avatar-imgaltsrc{item.user.avatar}//div/divdiv classNamecontent-wrap{/* 用户名 */}div classNameuser-infodiv classNameuser-name{item.user.uname}/div/div{/* 评论内容 */}div classNameroot-replyspan classNamereply-content{item.content}/spandiv classNamereply-info{/* 评论时间 */}span classNamereply-time{item.ctime}/span{/* 评论数量 */}span classNamereply-time点赞数:{item.like}/span{/* 条件user.id item.user.id */}{user.uid item.user.uid span classNamedelete-btn onClick{() onDel(item.rpid)}删除/span}/div/div/div/div)
}{/* 评论列表 */}
div classNamereply-list{/* 评论项 */}{commetList.map(item Item key{item.rpid} item{item} onDel{() handleDel(item.rpid)}/)}
/div
