首页 > 其他分享 >React基础-下

React基础-下

时间：2024-02-27 17:58:57浏览次数：24  
标签：return 函数 App 基础 React 组件 const useEffect

React

目录

React 表单控制

受控表单绑定

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

image-20240221113034350.

import {useState} from "react";

const App = () => {
	const [value, setValue] = useState('')

	return (
		<>
			<input
				type="text"
				value={value}
				onChange={(e) => setValue(e.target.value)}
			/>
		</>
	)
}

export default App

非受控绑定（React 中获取 DOM）

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

⚠️ 注意：只有当组件渲染完毕，才能获取 DOM 对象。

image-20240221113249430.

import {useRef} from "react";

const App = () => {
	const inputRef = useRef(null);
	
	const handleChange = () => {
		console.log(inputRef.current)
	}

	return (
		<>
			<input
				type="text"
				ref={inputRef}
				onChange={handleChange}
			/>
		</>
	)
}

export default App


React 组件通信

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

image.png.

A—B：父子通信

B—C：兄弟通信

A—E：跨层通信

抽象原则：App 作为 "智能组件" 负责数据的获取，Item 作为 "UI 组件" 负责数据的渲染。


父子通信 — 父传子

image.png.

父传子 实现步骤：

  1. 父组件传递数据 — 在子组件标签上绑定属性；
  2. 子组件接收数据 — 子组件通过 props 参数接收数据。
const Son = (props) => {
	return (
		<>
			<h1>Son 组件</h1>
			{props.sonMsg}
		</>
	)
}
const App = () => {
	const appMsg = '父传子'
	return (
		<>
			<Son sonMsg={appMsg}></Son>
		</>
	)
}

export default App

props 说明

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

image.png.

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


特殊的 prop children

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

image.png.

const Son = (props) => {
	return (
		<>
			<h1>Son 组件</h1>
			{props.children}
		</>
	)
}
const App = () => {
	return (
		<>
			<Son>
				<div>props children</div>
			</Son>
		</>
	)
}

export default App

父子通信 — 子传父

image.png.

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

image-20240221125850882.

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


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

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

export default App

兄弟组件通信

image.png.

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

  1. A 组件先通过子传父的方式把数据传递给父组件 App
  2. App 拿到数据之后通过父传子的方式再传递给 B 组件
// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B
import {useState} from "react";

const A = ({onGetMsg}) => {
	return (
		<button onClick={() => onGetMsg('状态提升')}>向兄弟组件 B 发送数据</button>
	)
}

const B = ({bMsg}) => {
	return (
		<h1>{bMsg}</h1>
	)
}


function App() {
	const [appMsg, setAppMsg] = useState('App 中的默认数据')
	const getMsg = (msg) => {
		setAppMsg(msg)
	}

	return (
		<>
			<A onGetMsg={getMsg}></A>
			<B bMsg={appMsg}></B>
		</>
	)
}

export default App

使用 Context 机制跨层级组件通信

image.png.

实现步骤：

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

import {createContext, useContext} from "react";

const B = () => {
	// 3. 在底层组件：通过 useContext 钩子函数使用数据
	const msg = useContext(MsgContext)

	return (
		<>
			<h1>B</h1>
			{msg}
		</>
	)
}

const A = () => {
	// 3. 在底层组件：通过 useContext 钩子函数使用数据
	const msg = useContext(MsgContext)

	return (
		<>
			<h1>A</h1>
			{msg}
			<B></B>
		</>
	)
}

// 1. createContext 方法创建一个上下文对象
const MsgContext = createContext(0);
const App = () => {
	const {Provider: MsgProvider} = MsgContext
	const msg = '跨层组件通信'

	return (
		<>
			{/* 2. 在顶层组件：通过 Provider 组件提供数据 */}
			<MsgProvider value={msg}>
				<A></A>
			</MsgProvider>
		</>
	)
}

export default App


React 副作用管理 — useEffect

概念

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

image.png.
⚠️ 说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于 "只由渲染引起的操作"。


useEffect 基础使用

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

语法：

image.png.
说明：

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

useEffect 依赖说明

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

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

const Son = () => {

	return (
		<>
			<h1>Son</h1>
		</>
	)
}
const App = () => {
	const [show, setShow] = useState(true)
	const [count, setCount] = useState(0)

	useEffect(() => {
		console.log('useEffect 函数执行了...', '【没有依赖项】', '组件初始渲染 + 组件更新时执行...')
	});
	useEffect(() => {
		console.log('useEffect 函数执行了...', '【空数组依赖】', '只在初始渲染时执行一次...')
	}, []);
	useEffect(() => {
		console.log('useEffect 函数执行了...', '【添加特定依赖项】', '组件初始渲染 + 特定依赖项变化时执行...')
	}, [show]);

	return (
		<>
			<button onClick={() => setCount(count + 1)}>{count}</button>
			<button onClick={() => setShow(false)}>卸载 Son 组件</button>
			{show && <Son></Son>}
		</>
	)
}

export default App

清除副作用

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

image.png.

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

import {useEffect, useState} from "react";

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

		return () => {
			// 清除副作用(组件卸载时)
			clearInterval(timer)
		}
	}, []);

	return (
		<>
			<h1>Son</h1>
		</>
	)
}
const App = () => {
	// 通过条件渲染模拟组件卸载
	const [show, setShow] = useState(true)


	return (
		<>
			<button onClick={() => setShow(false)}>卸载 Son 组件</button>
			{show && <Son></Son>}
		</>
	)
}

export default App


自定义 Hook 实现

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

image-20240226095115054.

// 封装自定义 Hook

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

// 解决思路: 自定义 hook

import {useState} from "react";

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

	const toggle = () => {
		setShow(!show)
	}

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

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

const App = () => {
	// const [show, setShow] = useState(true)
	// const toggle = () => {
	// 	setShow(!show)
	// }
	const {show, toggle} = useToggle()


	return (
		<>
			<button onClick={toggle}>toggle</button>
			{show && <h1>div</h1>}
		</>
	);
}

export default App


React Hooks 使用规则

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

⚠️ image-20240226220026360.


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

image-20240226220224197

⚠️ image-20240226220356963.

标签：return,函数,App,基础,React,组件,const,useEffect
From： https://www.cnblogs.com/rnny/p/18037398

相关文章

  • Java基础-String字符串和数组
    1.String基础：字符串是编程时经常用到的一种数据类型。Java中使用String类和StringBuilder类来封装字符串。String类定义不变字符串，StringBuffer类则用于可变字符串处理。换句话说，String类创建的字符串时不会改变的，而StringBuffer类创建的字符串可以修改。字符串的声明与创建：1.......
  • Java基础-面向对象概述
    本章重点针对面向对象的三大特征：继承、封装、多态进行详细的讲解。另外还包括抽象类、接口、内部类等概念。很多概念对于初学者来说，更多的是先进性语法性质的了解。1.面向对象-继承：1.继承的实现：继承通过如下格式实现：class子类名extends父类名[implements<接口名>]{}......
  • Java基础-面向过程和面向对象
    面向过程和面向对象都是对软件分析、设计和开发地一种思想，它指导着人们以不同的方式去分析、设计和开发软件。这两种思想是相辅相成的。面向过程：使用面向过程思想思考问题时，我们首先思考“怎么按步骤实现？”并将步骤对应成方法，一步一步，最终完成。这个思想适合简单任务，不需要过多......
  • Java基础-常用类
    一、字符串相关的类1.String的特性String类：代表字符串。Java程序中的所有字符串字面值（如"abc"）都作为此类的实例实现。String是一个final类，代表不可变的字符序列。字符串是常量，用双引号引起来表示。他们的值在创建之后不能更改。String对象的字符内容是存储在一个字符数......
  • 代码随想录 第六天 哈希表理论基础 ● 242.有效的字母异位词 ● 349. 两个数组的交
    LeetCode：242.有效的字母异位词-力扣（LeetCode）思路：既然只判断两个字符串的字母，就一个++，一个--，最后如果二十六个字母都是零，说明两个字符串相等。反思： //charat(i)是返回字符串索引，所以s.charAt(i)-'a'实际上是获取字符串s中第i个字符相对于字母'a'的偏移量。......
  • 白鲸开源科技与瀚高基础软件完成产品兼容性认证，开启数据管理新篇章
    北京白鲸开源科技有限公司（以下简称“白鲸开源”）今日宣布，其旗舰产品WhaleStudio套件已与瀚高基础软件股份有限公司（以下简称“瀚高软件”）旗下的IvorySQL数据库管理系统V3.0完成深度兼容性认证。此次合作标志着两家领军企业在数据管理领域的紧密联合，为用户提供更加稳定、高效的数据处......
  • react 使用splitChunks 拆分组件，缩小项目体积，加快加载访问速度
    react编写项目引入npm包打包时，总会将一些npm包重复打包的不同的js文件中，可以使用splitChunks进行拆分，降低体积，加快速度1、安装npminstallcustomize-crawebpack-bundle-analyzer2、修改启动命令，在package.json中修改"scripts":{"start":"react-app-rewiredstar......
  • RK3568驱动指南｜驱动基础进阶篇-进阶4 内核是如何运行ko文件的_insmod
        瑞芯微RK3568芯片是一款定位中高端的通用型SOC，采用22nm制程工艺，搭载一颗四核Cortex-A55处理器和MaliG522EE图形处理器。RK3568支持4K解码和1080P编码，支持SATA/PCIE/USB3.0外围接口。RK3568内置独立NPU，可用于轻量级人工智能应用。RK3568支持安卓11和linux......
  • 2024牛客寒假算法基础集训营1（补题）
    目录ABCDEFGHIKLAn的范围很小暴力直接\(O(n^3)\)直接做就行。我还傻的统计了一下前后缀，不过怎么写都行这道题。#include<bits/stdc++.h>#defineintlonglong#definerep(i,a,b)for(inti=(a);i<=(b);++i)#definefep(i,a,b)for(inti=(a);i>=(b);--i)#d......
  • 华为云携十大系统性创新亮相巴塞罗那 打造最适合AI的基础设施
    本文分享自华为云社区《华为云携十大系统性创新亮相巴塞罗那打造最适合AI的基础设施》，作者：华为云头条。近日，主题为“一切皆服务，加速千行万业智能升级”的华为云峰会在巴塞罗那隆重召开，汇聚来自运营商、金融、互联网等多个行业的超过500名企业高层和技术专家。华为云向与会者展......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99