react入门到实战-day2-7.21

news2024/11/23 22:36:03

昨天晚上刚学完已经一点了，来不及写笔记，主要是想睡觉哈，所以今天补上，我发现效率还挺高的，今天重新做笔记，加固了昨天的知识点，要不以后都这样子哈，学完第二天再写哈，要是大家有推荐的vue项目练手可不可以分享给我，跪求

React表单控制

受控绑定

概念：使用React组件的状态（useState）控制表单的状态

受控表单：

第一步：声明一个react状态--useState

第二步：通过value属性绑定react状态

第三步：绑定onChange事件，通过事件参数e拿到输入框的最新值，反向修改到react状态中

import {useState} from 'react'
function App(){
  const [value, setValue] = useState('')
  return (
    <input 
      type="text" 
      value={value} 
      onChange={e => setValue(e.target.value)}
    />
  )
}

非受控绑定

概念：通过获取DOM的方式获取表单的输入数据

react 获取dom

第一步：useRef生成ref对象，绑定到dom标签上

第二步：dom可用时（渲染完毕之后dom生成之后才可用），ref.current获取dom

import {useRef} from 'react'
function App(){
  const inputRef = useRef(null)

  const onChange = ()=>{
    console.log(inputRef.current.value)
  }
  
  return (
    <input 
      type="text" 
      ref={inputRef}
      onChange={onChange}
    />
  )
}

React组件通信

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

父子通信-父传子

实现步骤

  1. 父组件传递数据 - 在子组件标签上绑定属性

  2. 子组件接收数据 - 子组件通过props参数接收数据

  3. props：对象里面包含了父组件的传递过来的所有数据

function Son(props){
  return <div>{ props.v }</div>
}

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

props说明

props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX

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

父传子 - 特殊的prop children

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

父子通信-子传父

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

首先给子组件标签传递一个父组件中的函数，传过去之后子组件接收，在子组件通过某些事件调用起来，同时把自己的数据当作实参，传给父组件，父组件中的函数写一个形参接收

function Son({ onGetMsg }){
  const sonMsg = 'this is son msg'
  return (
    <div>
      {/* 在子组件中执行父组件传递过来的函数 */}
      <button onClick={()=>onGetMsg(sonMsg)}>send</button>
    </div>
  )
}


function App(){
//加一个状态数据
const {value,setSa}=useState('')

  const getMsg = (msg)
  =>{
  	console.log(msg)
  	setSa(msg)
  }
  
  return (
    <div>
      {/* 传递父组件中的函数到子组件 */}
       <Son onGetMsg={ getMsg }/>
       
       {msg}
       
    </div>
  )
}

兄弟组件通信

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

  1. A组件先通过子传父的方式把数据传递给父组件App

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

// A->App 
import { useState } from "react"

function A({ i }) {
  const n = 'this A'
  return (
    <div>
      this is A compnent,
      <button onClick={() => i(n)}>123</button>
    </div>
  )
}

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

    </div>
  )
}

function App() {
  const [name, setAa] = useState

  const getAname = (name) => {
    setAa(name)
    console.log(name);
  }
  return (
    <div>
      this is App
      <A i={getAname}></A>

    </div>
  )
}

export default App
// A->App App->B
import { useState } from "react"

function A({ i }) {
  const n = 'this A'
  return (
    <div>
      this is A compnent,
      <button onClick={() => i(n)}>123</button>
    </div>
  )
}

// 解构出来的x
function B({ x }) {
  return (
    <div>
      this is B compnent,
      {x}
    </div>
  )
}

function App() {
  // 要想把a的数据传给B，则app要准备一个数据用来接受a传过来的数据，
//并且希望b可以动态的显示这个数据，则需要状态变量
  const [name, setAa] = useState('')

  const getAname = (name) => {

    console.log(name);

    setAa(name)
  }
  return (
    <div>
      this is App
      <A i={getAname}></A>
      <B x={name}></B>
    </div>
  )
}

export default App

跨层组件通信

实现步骤：

  1. 使用 createContext方法创建一个上下文对象Ctx

  2. 在顶层组件（App）中通过 Ctx.Provider 组件提供数据

  3. 在底层组件（B）中通过 useContext 钩子函数获取消费数据

//App->A->B

import { createContext, useContext } from "react"

// 1. createContext方法创建一个上下文对象
const Asdf = createContext()

function A() {

  return (
    <div>
      this is A compnent,
      <B></B>
    </div>
  )
}


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

    </div>
  )
}

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

    </div>
  )
}

export default App

React副作用管理-useEffect

概念理解

useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）, 比如发送AJAX请求，更改DOM等等

说明：

  1. 参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作

  2. 参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次

import { useEffect, useState } from 'react'

const URL = 'http://geek.itheima.net/v1_0/channels'

function App() {

  // 之后才创建一个状态
  const [list, setSt] = useState([])

  useEffect(() => {
    async function getL() {
      const res = await fetch(URL)
      const i = await res.json()
      console.log(i);

      setSt(i.data.channels)
    }
    getL()
  }, [])

  return (
    <div>

      this is app
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}

      </ul>

    </div>
  )
}

export default App

useEffect依赖说明

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

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

function App() {
 

  const [count, setCount] = useState(0)


  //useEffect(() => {
   // console.log('fu');
  //})
  
   // useEffect(() => {
  //   console.log('fu');
  // }, [])

  useEffect(() => {
    console.log('fu');
  }, [count])

  return (
    <div>
      this is app
      <button onClick={() => setCount(count + 1)}>++{count}</button>
    </div>
  )
}

export default App

清除副作用

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

说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行

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函数可以用来实现逻辑的封装和复用

import { useEffect, useState } from 'react'


function App() {
  const [show, setShow] = useState(true)

  const v = () => setShow(!show)

  return (
    <div>
      {show && <div>显示与隐藏</div>}
      <button onClick={v} >asd</button>

    </div>
  )
}

export default App

封装自定义hook通用思路

1. 声明一个以use打头的函数

 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）

 3. 把组件中用到的状态或者回调return出去（以对象或者数组）

4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
 

import { useEffect, useState } from 'react'

// 封装自定义Hook

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

// 解决思路: 自定义hook


function useToggle() {

  // 可复用的逻辑代码
  const [show, setShow] = useState(true)

  const v = () => setShow(!show)

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

}


function App() {

  const { show, v } = useToggle()

  return (
    <div>
      {show && <div>显示与隐藏</div>}
      <button onClick={v} >asd</button>

    </div>
  )
}

export default App

React Hooks使用规则

  1. 只能在组件中或者其他自定义Hook函数中调用

  2. 只能在组件的顶层调用，不能嵌套在if、for、其它的函数中

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1942294.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【MSPM0G3507】CCS-Sysconfig配置 按键控制LED(二)

【MSPM0G3507】CCS-Sysconfig配置 按键控制LED(二)

1.相关配置 主控&#xff1a;MSPM0G3507编译环境&#xff1a;CCS 2.板子以及原理图 3.Sysconfig配置 LED配置一样 按键为INPUT DL_GPIO_readPins(GPIO_SWITCHES_PORT, GPIO_SWITCHES_USER_1_PIN)// 读取端口状态类型为uint32_t &#xff0c;返回的是对应引脚的状态位。比如…
阅读更多...
react中组件间的通信

react中组件间的通信

一、父传子 1.代码展示 import React, { useState } from react;function SonPage(props){ // 子组件const {msg} propsreturn (<div>我是子组件 {msg}</div>) }function App() { // 父组件const [msgText,setMsgText] useState(父传子)return (<div classN…
阅读更多...
四、GD32 MCU 常见外设介绍 (5) TIMER 模块介绍

四、GD32 MCU 常见外设介绍 (5) TIMER 模块介绍

5.1.TIMER 基础知识 TIMER分高级定时器&#xff0c;通用定时器L0&#xff0c;L1&#xff0c;L2和基本定时器。 5.2.硬件连接说明 TIMER 属于片内外设&#xff0c;对于外部硬件设计&#xff0c;只需要单独IO口外接信号线即可。 5.3.GD32 TIMER 外设原理简介&#xff08;以 G…
阅读更多...
wsl –install 遇到灾难性故障

wsl –install 遇到灾难性故障

windows10 使用wsl 安装Linux系统遇到&#xff1a;灾难性故障 解决办法
阅读更多...
VideoAgent: Long-form Video Understanding with Large Language Model as Agent

VideoAgent: Long-form Video Understanding with Large Language Model as Agent

VideoAgent: Long-form Video Understanding with Large Language Model as Agent 基本信息 博客贡献人 燕青 作者 Xiaohan Wang, Yuhui Zhang, et al. 标签 Large Language Model Agent, Long-form Video Understanding, Vision-Language Foundation Models 摘要 长视…
阅读更多...
【Drone】drone编译web端 防墙策略 | 如何在被墙的状态drone顺利编译npm

【Drone】drone编译web端 防墙策略 | 如何在被墙的状态drone顺利编译npm

一、drone编译防墙版本 1、web端drone kind: pipeline type: docker name: ui steps:- name: build_projectimage: node:20-slim depends_on: [clone]volumes:- name: node_modulespath: /drone/src/node_modulescommands:- pwd- du -sh *- npm config set registry https://…
阅读更多...
Anaconda下安装配置Jupyter

Anaconda下安装配置Jupyter

Anaconda下安装配置Jupyter 1、安装 conda activate my_env #激活虚拟环境 pip install jupyter #安装 jupyter notebook --generate-config #生成配置文件提示配置文件的位置&#xff1a; Writing default config to: /root/.jupyter/jupyter_notebook_config.py检查版本&am…
阅读更多...
从PyTorch官方的一篇教程说开去（3.3 - 贪心法）

从PyTorch官方的一篇教程说开去（3.3 - 贪心法）

您的进步和反馈是我最大的动力&#xff0c;小伙伴来个三连呗&#xff01;共勉。 贪心法&#xff0c;可能是大家在处理陌生问题时候&#xff0c;最容易想到的办法了吧&#xff1f; 还记得小时候&#xff0c;国足请了位洋教练发表了一句到现在还被当成段子的话&#xff1a;“如…
阅读更多...
用Label Studio，让数据标注变得简单而高效

用Label Studio，让数据标注变得简单而高效

Label Studio&#xff1a;精准标注&#xff0c;智能模型的起点- 精选真开源&#xff0c;释放新价值。 概览 Label Studio作为数据标注的得力助手&#xff0c;其设计初衷是简化机器学习项目中繁琐的数据准备工作。它提供了一个用户友好的界面&#xff0c;使得即便是非技术用户也…
阅读更多...
SpringMVC实现文件上传

SpringMVC实现文件上传

导入文件上传相关依赖 <!--文件上传--> <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version> </dependency> <dependency><groupId>…
阅读更多...
实现Nginx的反向代理和负载均衡

实现Nginx的反向代理和负载均衡

一、反向代理和负载均衡简介 1.1、反向代理 反向代理（reverse proxy）指：以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给Internet上请求连接的客户端。此时代理服务器对外就表现为一个反向代理服务器。 反向代…
阅读更多...
【YOLOv10[基础]】热力图可视化实践① | 支持视频热力图 | 密度热力图 | 论文必备

【YOLOv10[基础]】热力图可视化实践① | 支持视频热力图 | 密度热力图 | 论文必备

本文将进行添加YOLOv10版本的热力图可视化功能的实践，支持视频的热力图可视化。 目录 一 热力图可视化实践① 1 代码 2 效果图 在论文中经常可以见到提取的物体特征以热力图的形式展示出来，将特征图以热力图的方式进行可视化在深度学习中有以下的原因： ①强调激活区域 ，…
阅读更多...
HarmonyOS Next系列之地图组件（Map Kit）使用（九）

HarmonyOS Next系列之地图组件（Map Kit）使用（九）

系列文章目录 HarmonyOS Next 系列之省市区弹窗选择器实现&#xff08;一&#xff09; HarmonyOS Next 系列之验证码输入组件实现&#xff08;二&#xff09; HarmonyOS Next 系列之底部标签栏TabBar实现&#xff08;三&#xff09; HarmonyOS Next 系列之HTTP请求封装和Token…
阅读更多...
常用的网络爬虫工具推荐

常用的网络爬虫工具推荐

在推荐常用的网络爬虫工具时&#xff0c;我们可以根据工具的易用性、功能强大性、用户口碑以及是否支持多种操作系统等多个维度进行考量。以下是一些常用的网络爬虫工具推荐&#xff1a; 1. 八爪鱼 简介&#xff1a;八爪鱼是一款免费且功能强大的网站爬虫&#xff0c;能够满足…
阅读更多...
【详细的springboot自动装载原理】

【详细的springboot自动装载原理】

1.默认提供的核心配置模块 springboot提供了 spring-boot-autoconfigure模块&#xff0c;该模块为springboot自动配置的核心模块&#xff0c;它初始化好了很多我们平时需要的配置类&#xff0c;那么有了这些配置类就能生效了吗&#xff1f;得需要一个东西在启动的时候去把它加…
阅读更多...
C++ | Leetcode C++题解之第264题丑数II

C++ | Leetcode C++题解之第264题丑数II

题目&#xff1a; 题解&#xff1a; class Solution { public:int nthUglyNumber(int n) {vector<int> dp(n 1);dp[1] 1;int p2 1, p3 1, p5 1;for (int i 2; i < n; i) {int num2 dp[p2] * 2, num3 dp[p3] * 3, num5 dp[p5] * 5;dp[i] min(min(num2, num3…
阅读更多...
CTF-Web习题：2019强网杯 UPLOAD

CTF-Web习题：2019强网杯 UPLOAD

题目链接&#xff1a;2019强网杯 UPLOAD 解题思路 打开靶场如下图所示&#xff0c;是一个注册和登录界面 那就注册登录一下&#xff0c;发现是一个提交头像的页面&#xff1a; 试了一下只有能正确显示的png图片才能提交成功&#xff0c;同时F12拿到cookie&#xff0c;base6…
阅读更多...
自己开发软件实现网站抓取m3u8链接

自己开发软件实现网站抓取m3u8链接

几天前一个同学说想下载一个网站的视频找不到连接&#xff0c;问我有没有什么办法,网站抓取m3u8链接 网页抓取m3u8链接。当时一听觉得应该简单&#xff0c;于是说我抽空看看。然后就分析目标网页&#xff0c;试图从网页源码里找出连接&#xff0c;有的源代码直接有,但是有的没有…
阅读更多...
与Bug较量：Codigger之软件项目体检Software Project HealthCheck来帮忙

与Bug较量：Codigger之软件项目体检Software Project HealthCheck来帮忙

在软件工程师的世界里&#xff0c;与 Java 小程序中的 Bug 作战是一场永不停歇的战役。每一个隐藏在代码深处的 Bug 都像是一个狡猾的敌人&#xff0c;时刻准备着给我们的项目带来麻烦。 最近&#xff0c;我就陷入了这样一场与 Java 小程序 Bug 的激烈较量中。这个小程序原本应…
阅读更多...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第三十九章 Linux MISC驱动

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第三十九章 Linux MISC驱动

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023