React【Day2】

2024-04-17 22:36
文章标签 react day2 javascript frontend

本文主要是介绍React【Day2】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

React表单控制

受控绑定

概念:使用React组件的状态(useState)控制表单的状态

在这里插入图片描述

function App(){const [value, setValue] = 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站评论案例

在这里插入图片描述

  1. 手机输入框评论内容,并发布评论
  2. id处理和时间处理(uuid 和 day.js)

React组件通信

概念:组件通信就是组件之间的数据传递, 根据组件嵌套关系的不同,有不同的通信手段和方法

在这里插入图片描述

  1. A-B 父子通信
  2. B-C 兄弟通信
  3. A-E 跨层通信

父子通信-父传子

在这里插入图片描述

基础实现

**实现步骤 **

  1. 父组件传递数据 - 在子组件标签上绑定属性
  2. 子组件接收数据 - 子组件通过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
在这里插入图片描述

props是只读对象
子组件只能读取props中的数据,不能直接进行修改, 父组件的数据只能由父组件修改

特殊的prop-chilren

场景:当我们把内容嵌套在组件的标签内部时,组件会自动在名为children的prop属性中接收该内容

在这里插入图片描述

父子通信-子传父

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

核心思路:在子组件中调用父组件中的函数并传递参数

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>)
}

兄弟组件通信

在这里插入图片描述

实现思路: 借助 状态提升 机制,通过共同的父组件进行兄弟之间的数据传递

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

// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> Bimport { 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 [name, setName] = useState('')const getAName = (name) => {setName(name)}return (<div>this is App<A onGetAName={getAName} /><B name={name} /></div>)
}export default App

跨层组件通信

在这里插入图片描述

实现步骤:

  1. 使用 createContext方法创建一个上下文对象Ctx
  2. 在顶层组件(App)中通过 Ctx.Provider 组件提供数据
  3. 在底层组件(B)中通过 useContext 钩子函数获取消费数据
// App -> A -> Bimport { 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等等
在这里插入图片描述

:::warning
说明:上面的组件中没有发生任何的用户事件,组件渲染完毕之后就需要和服务器要数据,整个过程属于“只由渲染引起的操作”
:::

基础使用

需求:在组件渲染完毕之后,立刻从服务端获取平道列表数据并显示到页面中

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
说明:

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

useEffect依赖说明

useEffect副作用函数的执行时机存在多种情况,根据传入依赖项的不同,会有不同的执行表现

依赖项副作用功函数的执行时机
没有依赖项组件初始渲染 + 组件更新时执行
空数组依赖只在初始渲染时执行一次
添加特定依赖项组件初始渲染 + 依赖项变化时执行

清除副作用

概念:在useEffect中编写的由渲染本身引起的对接组件外部的操作,社区也经常把它叫做副作用操作,比如在useEffect中开启了一个定时器,我们想在组件卸载时把这个定时器再清理掉,这个过程就是清理副作用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
:::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 [show, setShow] = useState(true)return (<div>{show && <Son />}<button onClick={() => setShow(false)}>卸载Son组件</button></div>)
}export default App

自定义Hook实现

概念:自定义Hook是以 use打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

// 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hookimport { useState } from "react"function useToggle () {// 可复用的逻辑代码const [value, setValue] = useState(true)const toggle = () => setValue(!value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {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使用规则

  1. 只能在组件中或者其他自定义Hook函数中调用
  2. 只能在组件的顶层调用,不能嵌套在if、for、其它的函数中

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
在这里插入图片描述

案例-优化B站评论案例

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

这篇关于React【Day2】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/913044

相关文章

vue3显示element-plus所有icon

效果 代码 <template><div style="display: flex;flex-wrap: wrap"><component :is="name" style="width: 2rem; margin-left: 2rem" v-for="(name,index) in icons" :index="index" :key="index"></component></div>

bimface开发实战-vue版

效果 演示地址 框架 bimface + vue3.0 代码地址 gitee地址 使用 yarn install yarn serve

vue3.0 v-model 的使用

前言 组件功能:把 el-switch 的值 false/true, 动态绑定输出为 0, 1 组件代码 封装el-switch组件,当el-switch的值为false,输出值为0;当el-switch的值为true,输出值为1; <template><el-switch v-model="switchValue" @change="changeEvent"></el-switch

Vue学习笔记:拦截器

原文地址 Vue可以对http request和http response添加全局拦截,最典型的例子就是在请求头里添加token,和监测是否登录,如果没有登录则跳转到登录页面。 main.js中添加拦截器的代码: 1. request 拦截器 //request 拦截器,在请求头中加tokenaxios.interceptors.request.use(config => {if (lo

css3属性之background-size兼容ie8方案

解决方案 在ie8浏览器可能背景图片无法自适应全屏,这时候加入设置filter属性即可解决问题,同时加入height:100 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.bg{background: #EAEAEA;height: 100%;background

vue cli4之Eslint初使用

一.介绍 ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外: ESLint 使用 Espree 解析 JavaScript。ESLint 使用 AST 去分析代码中的模式ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加

vue router路由解析

一、前言 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 二、安装 1.安装包 npm install vue-router 2.项目引用 在cli4脚手架目录router下index.js中引用 import Vue from 'vue'import VueRouter from 'vue-rou

vue多语言插件vue-i18n

安装vue-i18n npm install vue-i18n -S 使用 1.在main.js中引入vue-i18n import VueI18n from 'vue-i18n'Vue.use(VueI18n) 2.vue-i18n初始化 const i18n = new VueI18n({locale: 'cn', // 默认语言messages}) 3.vue-i

Vue.js之Socket.IO 使用

一.前言 在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。 1、什么是 Socket.IO? Socket.IO是一个WebSocket库,可以在浏览器和服

Vue之组件间的数据通信

一、父组件与子组件传值 1.pros 通过 Prop 父组件向子组件传递数据。props是单向绑定的,即只能父组件向子组件传递,不能反向,是 Vue 的设计理念之单向数据流。 2.$emit 官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。