当前位置：首页 > news >正文

日常随笔-React摘要

news 2025/7/23 7:42:18

缺点

社区维护，依赖社区

声明式编程

告诉计算机你想要的结果（黑箱模型），而不用去关心一步步如何实现（和命令式编程恰好相反）
在React中体现为使用者只需关注描述 UI 的状态，而不是操作DOM的细节，这不同于传统的命令式DOM操作
- JSX视图：用类似HTML的语法表达界面应该长什么样
- 用钩子函数 useState 来描述组件状态（状态即控制UI的数据）与 useEffect 处理副作用（Vue是通过模版+指令系统v-if,v-for… 来描述状态，用生命周期钩子来处理副作用）
- 条件渲染：通过条件判断语句
  - 用 if-else 分支赋值
  - 条件？运算符（工作于JSX内部）： { isLoggedIn ? <User /> : <Login /> } （入股登录了就调用出 <User /> 否则就调用组件 <Login />
- 渲染列表：通过 map 函数将这个数组转换为 < li > { item } < /li > 标签构成的列表
- 路由控制： < Route path = “/home” element={<Home />} / >

函数式编程（Function Programming，FP）

强调用纯函数构建程序，用函数处理数据、描述流程，而不是用对象和状态去驱动程序，避免共享状态和副作用
纯函数的优点
- 输入相同时输出永远相同，无副作用
- 不修改原始数据，只返回新值
- 也可以传入函数（高阶函数，比如工厂函数、记忆函数）

使用JSX编写标签

JSX本质是一种描述UI结构的声明式语法糖，最终会转换为 React.createElement( ) 函数式调用，这些函数会生成 虚拟DOM ，然后通过 diff 算法比对后更新真实DOM
- 比如：< div className = “box” > Hi < /div >
- 转为：React.createElement ( “div” , {className : “box” } ,“Hi” )
JSX 不是浏览器原生支持的内容，它只是React的一种写法，从 React17 开始，Babel插件或构建工具自动引入 import {jsx} from ‘react/jsx-runtime’
JSX会转义所有输入内容，防止攻击（可以通过 ={{_html:HTML}}显示转义前的内容）
在JSX标签中可以通过 { } 中回到JS从而嵌入一些变量状态

响应事件：通过在组件中声明事件处理函数来响应事件

比如

return(

按钮

</botton>

)

注意，这里的 CallBacks 是作为参数传入，而不是调用，不要加( )

onClick是React中的事件处理函数（等于Vue的setup中的 @click = “CallBacks” ）

响应式更新

通过 useState
示例

import React, { useState } from 'react';
import './App.css';export default function MyApp(){return (<div><h1>独立计数器1和2</h1><MyButton /><MyButton /></div>);
}function MyButton(){const [cnt,changecnt] = useState(230);// 获取 状态 , 用于更新其的函数     // 状态初始值function Click(){changecnt( cnt+1 ); // 注意不能直接修改状态，而是得创建新的状态值}return(<button onClick={Click}>总共点了 {cnt} 次</button>)
}

启动
- npx create-react-app my-button-app
- cd /Users/a86198/Desktop/JS/my-button-app && npm start
注意：每个组件实例的数据不会互相污染，每个组件都会拥有自己的state，这是因为state是函数，利用了闭包的私密性

Hook钩子函数

像上面的 useState 这种以 use 开头的函数
Hook钩子函数使用比普通函数更严格，只能在组件或其他Hook的顶部调用，比如如果你想在条件或者循环里面使用钩子就必须提取一个新组件在组件内部使用

组件间共享数据

为了统一组件中的状态数据，需要将子组件分开的 state状态数据向上移动到最接近包含所有子组件的大组件中（最小公倍数的感觉）

export default function MyApp(){const [cnt,changeCnt] = useState(230);// 提前function Click(){changeCnt(cnt+1);}return (<div><h1>共同计数器</h1><MyButton /><MyButton /></div>)function MyButton(){return (<button onClick={Click}>总共点了 {cnt} 次</button>)}
}

使用这种方式传递的信息被称为 prop (单向数据传递机制）