React
文章平均质量分 65
React
朝阳39
钟爱编程,偏前端开发,欢迎私信我加入EC尽享编程俱乐部共同学习,交流成长!
展开
-
React 性能优化
使用 useMemo 缓存数据 (类似 vue 的 computed)使用 useCallback 缓存函数异步组件 ( lazy )路由懒加载( lazy )服务器渲染 SSR用 CSS 模拟 v-show循环渲染添加 key使用 Fragment (空标签)减少层级不在JSX 中定义函数(每次状态变化,都会重新渲染 JSX,若在JSX 中定义函数,则会不断创建新函数,损耗性能)在构造函数中 bind this (若在其他地方bind,在更新渲染时,会重复执行,损耗性能)使用原创 2024-08-07 11:50:34 · 287 阅读 · 0 评论 -
React 18【实用教程】(2024最新版)
含@配置,react-developer-tools 和 Redux DevTools 下载安装。原创 2024-07-23 17:26:42 · 742 阅读 · 0 评论 -
react18 实现具名插槽
当父组件给子组件传递的 JSX 超过一个标签时,子组件接收到的 children 是一个数组,通过解析数组中各 JSX 的属性 slot ,即可实现具名插槽的分发!原创 2024-06-20 16:04:40 · 511 阅读 · 0 评论 -
react18【系列实用教程】Hooks 闭包陷阱 (2024最新版)含useState 闭包陷阱,useEffect 闭包陷阱,useCallback 闭包陷阱
点击按钮后执行结果为count的值为 1原因解析在一个渲染周期内,对同一响应式变量进行多次修改时,仅最后一次修改有效!(为了提升渲染性能)解决方案setCount 改传入一个函数(实现每一次 count 都是取的修改后的新值!console.log("count的值为", count);return (原创 2024-05-31 10:49:25 · 459 阅读 · 1 评论 -
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
JSX 代码本身并不是 HTML,也不是 Javascript,在渲染页面前,需先通过解析工具(如babel)解析之后才能在浏览器中运行。可查看 JSX 解析后的效果更早之前,Babel 会把 JSX 转译成一个函数调用,功能与现在的 jsxs 函数类似相当于 vue 的 h 函数例如会被Babel 转译为React.createElement() 会创建对象这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。原创 2024-05-23 11:57:54 · 1182 阅读 · 0 评论 -
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
创建了一个 current 属性值为 0 的 ref 对象。原创 2024-05-16 15:39:47 · 533 阅读 · 0 评论 -
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
将需要缓存的组件作为 memo 函数的参数传入,并将 memo 函数的返回值对外导出即可。原创 2024-05-15 16:10:07 · 586 阅读 · 0 评论 -
react18【系列实用教程】useCallback —— 缓存函数 (2024最新版)
当父组件向子组件传递了函数,也会引发 memo 缓存组件失效,因为函数也是引用类型的数据,父组件重新渲染时,传给子组件的函数的内存地址也会重新生成,引发子组件重新渲染。原创 2024-05-15 15:49:13 · 287 阅读 · 0 评论 -
react18【系列实用教程】useMemo —— 缓存数据 (2024最新版)
为什么添加了 memo ,子组件2依然重新渲染了呢?因为父组件向子组件2传递了引用类型的数据每次父组件重新渲染时,引用类型的数据 userInfo 的内存地址都会重新生成,导致子组件重新渲染。:若 userInfo 是用 useState 声明的响应式变量,则内存地址不会重新生成,所以不会引发子组件的重新渲染。原创 2024-05-15 15:32:11 · 716 阅读 · 0 评论 -
react18【系列实用教程】useReducer —— 升级版的 useState (2024最新版)
useReducer 可看做升级版的 useState ,其强大之处在于,可以自定义复杂的响应式变量修改逻辑。原创 2024-05-15 09:54:08 · 491 阅读 · 0 评论 -
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
你好;也可以写成箭头函数return 你好原创 2024-05-14 16:05:47 · 968 阅读 · 0 评论 -
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
即根据自己的业务需要编写use开头的函数,实现逻辑封装和复用。新建文件 myHooks.js,存放所有自定义的 hook将可复用的逻辑封装成use开头的函数,以对象或数组的数据格式 return 组件中需要用到的变量和函数对外导出自定义的 hook在目标组件中导入自定义的 hook通过对象/数组解构赋值(与自定义 hook 中return 的数据格式对应),使用自定义的 hook。原创 2024-05-14 16:01:22 · 696 阅读 · 0 评论 -
react18【系列实用教程】react-router-dom —— 路由管理 (2024最新版)
类似 vue-router。原创 2024-05-14 15:22:14 · 1745 阅读 · 0 评论 -
react18【系列实用教程】moxb —— 集中状态管理 (2024最新版)
以 User.js 为例,详见注释// 定义类// 构造函数/** 【自动创建响应式】* 第1个参数:要创建为响应式的对象,此处的this即指当前类* 第2个参数:默认第1个参数的所有属性和方法都会添加响应式,可在此指定不添加响应式的属性和方法,如{if_Login:false},即属性if_Login无响应式* 第3个参数:指定自动绑定this,方便在页面使用时,绑定事件无参数时可不使用箭头函数*/// 属性 if_Login --- 用户是否登录。原创 2024-05-13 18:01:30 · 715 阅读 · 0 评论 -
react18【系列实用教程】useEffect —— 副作用操作 (2024最新版)
useEffect 用于编写(官方称呼为:副作用操作)原创 2024-05-11 17:02:15 · 877 阅读 · 0 评论 -
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
Context 机制是 react 实现外层组件向内层组件传值的一种方案,父组件可以向其内部的任一组件传值,无论是子组件还是孙组件或更深层次的组件。原创 2024-05-11 10:44:26 · 873 阅读 · 0 评论 -
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
类似 vue 中的 v-model。原创 2024-05-10 17:13:45 · 382 阅读 · 0 评论 -
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
动态样式、lodash排序原创 2024-05-10 15:50:08 · 391 阅读 · 0 评论 -
react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组
类似 vue 的 data 选项。原创 2024-05-10 14:34:53 · 524 阅读 · 0 评论 -
react18【系列实用教程】JSX (2024最新版)
hello("朝阳")}>问好此时要想获取事件对象 e,需在箭头函数传入参数econsole.log("你好," + name);return ( hello("朝阳", e)}>问好原创 2024-05-10 11:08:08 · 745 阅读 · 0 评论 -
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
以项目名reactDemo为例。原创 2024-05-07 11:05:57 · 764 阅读 · 0 评论 -
React官网 - 井字棋 - 游戏改进参考答案(含汉化和完整范例代码)
React 官网 - 井字棋 - 游戏教程原创 2022-06-17 17:40:30 · 319 阅读 · 0 评论 -
react 搭建开发环境
下载安装最新版 node.js若已安装过node.js,请检查版本是否满足需求若版本过低,则重新安装最新版即可。在用于创建 react 项目的文件夹中打开终端,执行命令若提示是否安装 create-react-app,则输入 y 后按回车即可。若出现以下报错则需先使用以下命令清除缓存后重试项目创建成功后,会得到用 vscode 打开文件夹 my-app1,在NPM脚本中启动项目浏览器中访问 http://localhost:3000/至此证明项目创建成功!在第2步中,已介绍了使用vsc原创 2022-06-10 15:16:54 · 435 阅读 · 0 评论