react专题

js react 笔记 2

起因，目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

React 笔记父子组件传值 | 父组件调用子组件数据 | defaultProps | propsType合法性验证

1.通过props实现父组件像子组件传值、方法、甚至整个父组件传递整个父组件则 [变量名]={this} import Header from "./Header"render(){return(<Header msg={"我是props传递的数据"}/>)} import React,{Component} from "react";class Header extends

react笔记 8-21 约束性表单

1、约束性组件和非约束性组件非约束性组件<input type="text" name="" defaultValue={this.state.msg}></input>这里他的value是用户输入的值并没有执行操作只是获取到了msg的值用户输入不会改变数据非约束性组件需要使用defaultValue获取数据否则会报错约束性组件<input type="text

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{

react笔记 8-18 事件方法定义方法获取/改变数据传值

1、定义方法并绑定 class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onCli

react笔记 8-17 属性绑定 class绑定引入图片循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{} 注

react笔记 8-16 JSX语法定义数据数据绑定

1、jsx语法和vue一样只能有一个根标签一行代码写法 return <div>hello world</div> 多行代码返回必须加括号 return (<div><div>hello world</div><div>aaaaaaa</div></div>) 2、定义数据数据绑定 constructor(){super()this.state={na

2021-8-14 react笔记-2 创建组件基本用法

1、目录解析 public中的index.html为入口文件 src目录中文件很乱，先整理文件夹。新建components 放组件新建assets放资源 ->/images ->/css 把乱的文件放进去修改App.js 根组件和index.js入口文件中的引入路径 2、新建组件在components文件夹中新建[Name].js文件 //组件名首字母大写

2021-08-14 react笔记-1 安装、环境搭建、创建项目

1、环境 1、安装nodejs 2.安装react脚手架工具 // cnpm install -g create-react-app 全局安装 2、创建项目 create-react-app [项目名称] 3、运行项目 npm strat //cd到项目文件夹进入这个页面代表运行成功 4、打包 npm run build

React第五章(swc)

swc 什么是swc? SWC 既可用于编译，也可用于打包。对于编译，它使用现代 JavaScript 功能获取 JavaScript / TypeScript 文件并输出所有主流浏览器支持的有效代码。 SWC在单线程上比 Babel 快 20 倍，在四核上快 70 倍。简单点来说swc实现了和babel一样的功能，但是它比babel快。 FAQ为什么快? 编译型 Rust 是

React的context学习总结

context是干什么的？为什么会存在这么一个东西？ context字面意思是上下文，在react中存在是为了解决深层次组件传值困难的问题这里涉及到组件的传值问题，大体商说分三总：兄弟间传值（通过父组件），父往子传值（通过props），子往父传（props函数回调），这是基础的传值问题，但是如果组件嵌套的太深，那么传值就变的非常麻烦，为了解决这样的问题才产生了context 这是cont

【ReactJS】通过一个例子学习React组件的生命周期

源代码 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Reac

【ReactJS】React项目构建的几种方式

前言：构建React项目的几种方式：构建：create-react-app 快速脚手架构建：generator-react-webpack构建：webpack一步一步构建 1）构建：create-react-app 快速脚手架 FaceBook官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具create-react-app。 creat-react-app优点无需配置：

react antd table expandable defaultExpandAllRows 不生效问题

原因：defaultExpandAllRows只会在第一次渲染时触发解决方案：渲染前判断table 的datasource 数据是否已准备好 {pageList.length > 0 ? (<TablerowSelection={rowSelection}columns={columns}dataSource={pageList}style={{ marginTop: 24 }}pagina

学习react一，环境搭建，基础语法

react开发环境搭建选择一个目录，然后运行以下命令： npm init vite 执行完成之后会让你输入项目名称例如 demo-01接下来会让你选择一个框架这时候选择 react然后选择 TypeScript + SWC 如果你不会ts就选择js 目录介绍 public 公共目录src assets 静态资源App.css 根组件样式App.tsx 根组件index.css 全

React第三章(tsx语法入门 )

tsx语法入门 FAQ tsx跟jsx有什么区别答: 基本没有没有区别只是在jsx语法上增加了类型。 jsx是什么？答：jsx是js的语法扩展，允许在js中编写html代码。例如：const fn = () => <div>小满是谁？没听说过</div> 语法编写使用tsx绑定变量{value} 绑定class需要用className function App()

React第四章(babel)

Babel 什么是Babel? Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程，能够将源代码转换为目标代码。 AST -> Transform -> Generate 官网 https://babeljs.io/ 查看AST https://astexplorer.net/ Babel所有的包 https://babeljs.io/docs/

react的useRef作用是什么怎么使用

useRef 是 React 中的一个 Hook，它允许你在函数的整个生命周期内保持对某个值的“引用”不变。这个 Hook 特别适用于需要直接访问 DOM 元素或者在函数的多次渲染之间需要保持某些数据不变（如缓存值）的场景。作用访问 DOM 元素：你可以通过 useRef 创建一个 ref 对象，并将其附加到 React 元素上，以便通过 ref 直接访问 DOM 元素。在组件的整个生命周

【前端面试】事件监听机制React 的事件系统实现

目的 React 实现了自己的事件系统，主要是为了解决以下几个问题：跨浏览器兼容性：不同的浏览器在处理 DOM 事件时有不同的实现，React 的事件系统抽象了这些差异，提供了一致的 API 给开发者使用。性能优化：React 可以对事件进行池化（Pooling），这意味着事件对象可以在事件处理过程中被重用，减少了内存分配和垃圾回收的开销。合成事件（Synthetic Events

【React】Vite 构建 React

项目搭建 vite 官网：Vite 跟着文档走即可，选择 react ，然后 ts + swc。着重说一下 package-lock.json 这个文件有两个作用：锁版本号（保证项目在不同人手里安装的依赖都是相同的，解决版本冲突的问题）缓存（依赖的名字 + version + resolved ==> 生成一个 hash 值，然后这个 hash 值会与 integrity 的 hash

NextJs-react开发者的全栈最佳选择(从0-1的react全栈入门指南)

NextJs:react开发者的全栈最佳选择(从0-1的react全栈入门指南) 目录前言学习路线 1.TS速成2.React速成视频入门（四个板块）3.React官方文档4.学习React常用hooks5.学习tailwindcss6.做一个小项目：One Thing7.学习NextJS148.学习MongoDB9.学习AuthJS/Next-Auth10.巩固NextJS11.NextJ

React 通用后台管理项目

React 通用后台管理项目项目介绍本项目是基于React的通用后台管理系统，整体系统有数据可视化展示，数据基本的增删改查功能。项目使用 Create React App创建，主语言为JavaScript。在使用React框架过程中通过hook进行页面逻辑编写。后端接口数据使用Mock进行模拟。开源项目代码地址 https://github.com/yaodada123/react-

《React Native 应用开发最佳实践》

《React Native 应用开发最佳实践》近年来，React Native 应用开发因其能够使用 JavaScript 构建原生移动应用的能力而大受欢迎。它提供了跨平台兼容性、更快的开发时间以及更易于维护的特性，成为了许多开发者的首选。然而，要确保 React Native 应用的成功，在整个开发过程中遵循最佳实践至关重要。在 React Native 应用开发中遵循最佳实践不仅能确保

react 从后端获取文件流导出

//掉用后端接口获取文件数据 POST 请求export function exportGetFile(url: string, data: any) {return executeAndTryCatch(() =>request<Record<string, any>>(url, {method: 'GET',params: data,responseType: 'blob',getResp

React-学习指南

React 目录：文章目录前言推荐阅读整个部分搭建本地环境1. 安装`Node.JS`2. 创建一个新的React项目React工具链的作用不使用工具链推荐的工具链Create React AppNext.jsGatsby更灵活的工具链从头开始打造工具链 3. 删除新项目中的`src`所有文件4. 运行 `CDN`链接核心概念1. 入门2. `JSX`变量声明在`JSX`嵌入表达式

Scala并发编程react、loop代码实战详解

示例代码及注释： //scala并发编程中的react和loop，共同特点：//通过线程存用的方式让性能有所提升。//Actor本身的运行，被actor子系统管理的时候，会有一个或者多个远程的线程让当前的actor使用//一般情况下每个Actor都有自己的线程。只有有自己的线程时，我们的Actor中的actor方法才会执行。//但是，这样线程的开销会非常大，所以为了共用线