React基础

张

张建站

2026/6/3 10:20:12

10分钟阅读

目录一、开发环境搭建二、状态1.状态驱动2.列表渲染三、参数1.组件开发2.父组件向子组件传参3.子组件向父组件传参四、副作用Hooks1.useState()2.useEffect()3.useRef()4.useActionState()一、开发环境搭建当前主流方案是使用Vite脚手架npmcreate vitelatest 项目名--templatereact-ts二、状态1.状态驱动传统开发依靠JavaScriptAjax定位DOM元素并绑定事件依靠事件驱动页面变化。React、Vue属于状态驱动根据状态的变化实时更新页面封装了事件驱动的过程只关注页面结果。// 其中在JavaScript中编写的HTML在编译阶段会被编译成JavaScripth1 classNametitleHello World/h1// 实际上会被编译成React.createElement(h1,{className:title},Hello World);状态驱动即根据参数的值返回不同的HTML代码块如果要基于某个参数的状态实时更新页面必须要使用useState(0)定义参数函数传入初始值和格式返回状态变量和状态更新函数。状态更新函数不仅会更新变量还会触发该组件的一次重新渲染。由于状态变量具有不可变性因此状态更新函数更新变量的原理是将新的状态变量赋值给引用。exportfunctionApp(){// 状态const[count,setCount]useState(0)// 视图returndiv onClick{()setCount(count1)}{count}/div}而以下方式参数变化不会引起页面变化exportfunctionApp(){// 状态letcount0// 视图returndiv onClick{()count1}{count}/div}2.列表渲染import{useState}fromreactinterfaceUser{id:stringname:string}exportconstListDemo(){const[userId,setUserId]useState()const[userName,setUserName]useState()const[userList,setUserList]useStateUser[]([])constaddUser(){if(!userId||!userName)return// ...userList将旧数组数据取出。并追加一条新用户数据用新数组更新状态变量setUserList([...userList,{id:userId,name:userName}])setUserId()setUserName()}return(divinput value{userId}onChange{(event)setUserId(event.target.value)}/input value{userName}onChange{(event)setUserName(event.target.value)}/button onClick{addUser}/buttonul{userList.map((item)(li}{item.id}-{item.name}/li))}/ul/div)}三、参数1.组件开发组件开发即解耦页面为多个不同功能的组件便于复用。组件定义规范如下组件参数一般用接口定义参数可以是变量、函数。使用export将子组件暴露出去其他文件可以通过import导入。组件返回值是HTML代码块可以根据参数渲染不同内容。import{useState}fromreactinterfaceHelloWorldProps{title:string,render?:()React.ReactNode}exportconstHelloWorld(props:HelloWorldProps){const{title,render}props;const[count,setCount]useState(0);returndiv{title}br/{count}button onClick{(){setCount(count1)}}/button{render?.()}/div}2.父组件向子组件传参父组件通过组件属性向子组件传递参数子组件使用函数形参捕获。import./App.cssimport{HelloWorld}from./components/HelloWorld/indexexportfunctionApp(){returnHelloWorld title这是父组件向子组件传递参数render{(){returndiv这是父组件向子组件传递的函数/div}}/}import{useState}fromreactinterfaceHelloWorldProps{title:string,render?:()React.ReactNode}exportconstHelloWorld(props:HelloWorldProps){const{title,render}props;returndiv{title}br/{render?.()}/div}3.子组件向父组件传参父组件通过组件属性向子组件传递由父组件编写的回调函数子组件调用父组件的回调函数并传入参数父组件就能通过函数体拿到子组件传入的参数。exportfunctionApp(){const[num,setNum]useState(0);returndivHelloWorld handle{(msg:number){setNum(msg)}}/div子组件向父组件传来的值{num}/div/div}import{useState}fromreactinterfaceHelloWorldProps{handle?:(count:number)void}exportconstHelloWorld(props:HelloWorldProps){const{handle}propsconst[count,setCount]useState(0);returndiv{count}button onClick{(){setCount(count1);handle?.(count1)}}/button/div}四、副作用HooksHook赋予组件能使用 state 状态、生命周期的能力将静态组件动态化。1.useState()useState(0)用于维护状态变量通过状态更新函数更新变量会触发该组件的一次重新渲染exportfunctionApp(){// 状态const[count,setCount]useState(0)// 视图returndiv onClick{()setCount(count1)}{count}/div}2.useEffect()useEffect()用于监听状态变量的变化当状态变量发生变化时执行函数体import./App.cssimport{useEffect,useState}fromreactexportfunctionApp(){// 状态const[count,setCount]useState(0)//副作用useEffect((){console.log({count})},[count])// 视图returndiv onClick{()setCount(count1)}{count}/div}useEffect((){},[prop])状态变量发生变化时执行useEffect((){})组件发生变化后执行useEffect((){},[])仅组件挂载阶段执行3.useRef()useRef()用于获取DOM和缓存变量。import./App.cssimport{useRef}fromreactexportfunctionApp(){// div对象constdivRefuseRefHTMLDivElement(null)returndiv ref{divRef}/div}4.useActionState()useActionState()用来获取表单提交状态和返回值。import{useActionState}fromreactexportconstFormDemo(){consthandleSubmitasync(formData:FormData){constnameformData.get(name)console.log({name})awaitapi.post(/user,{name})return{}}const[state,actions,pending]useActionState(handleSubmit,null)console.log(当前提交状态和返回值,state)return(form action{actions}input typetextnamename/button typesubmit提交/button/form)}

企业 Data Agent 选型避坑：从 Agent Washing 到可追溯、语义层、NL2LF2SQL 的三条技术分水岭｜亿问实践

Meta Description： Gartner 预测超 40% Agentic AI 项目将在 2027 前被叫停，根因不在模型能力，而在选错场景、缺乏可追溯性与语义层。本文从工程视角拆解 Data Agent 选型的三条技术分水岭——数字可追溯（确定性算法生成 SQL 而非…...

2026/6/3 10:20:06 阅读更多 →

3步搞定无边框游戏窗口：告别Alt+Tab卡顿的游戏窗口管理神器

3步搞定无边框游戏窗口：告别AltTab卡顿的游戏窗口管理神器【免费下载链接】Borderless-Gaming Play your favorite games in a borderless window; no more time consuming alt-tabs. 项目地址: https://gitcode.com/gh_mirrors/bo/Borderless-Gaming 你是…...

2026/6/3 10:17:53 阅读更多 →

实战：用CAPL实现一个简单的车身控制逻辑

经过前面13篇文章的学习，我们已经掌握了CANoe的所有基础功能和CAPL编程的核心技巧。现在是时候把这些知识整合起来，做一个完整的实战项目了。本文将带领你从零开始，用CAPL实现一个功能完整的车身控制模块（BCM）仿真系统…...

2026/6/3 10:16:09 阅读更多 →

AnolisOS 8.8安装源配置踩坑实录：从‘设置基础软件仓库时出错’到成功联网的保姆级指南

AnolisOS 8.8安装源配置实战指南：从诊断到解决方案的全流程解析当你在安装AnolisOS 8.8时遇到"设置基础软件仓库时出错"的提示，这通常意味着系统无法访问或识别安装源。这个问题看似简单，但背后可能涉及网络配置、镜像选择、启动参…...

2026/6/2 16:05:16 阅读更多 →

Lindy路线图前瞻：3个已被验证的信号，预示Q3将启动下一代AI原生平台重构

更多请点击： https://intelliparadigm.com 第一章：Lindy路线图前瞻：3个已被验证的信号，预示Q3将启动下一代AI原生平台重构信号一：核心基础设施层API调用量连续8周突破临界阈值 Lindy平台的 /v2/execute与 /v3/plan端…...

2026/6/3 1:19:41 阅读更多 →

【AI工具智能排行榜TOP10】：2024年实测数据驱动的生产力跃迁指南（仅限本周开放下载）

更多请点击： https://kaifayun.com 第一章：AI工具智能排行榜TOP10的底层逻辑与评估范式 AI工具排行榜并非主观评分的产物，而是由多维可量化指标驱动的系统性工程。其核心在于构建一个兼顾能力广度、推理深度、工程鲁棒性与生态协同性的评估范…...

2026/6/3 7:00:40 阅读更多 →

3步解决博德之门3模组管理难题：BG3ModManager完整使用指南

3步解决博德之门3模组管理难题：BG3ModManager完整使用指南【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. This is the only official source! 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager BG3ModManager是专为《博德之…...

2026/6/3 10:51:42 阅读更多 →