React

react state 如同一张快照

摘要：也许 state 变量看起来和一般的可读写的 JavaScript 变量类似。但 state 在其表现出的特性上更像是一张快照。设置它不会更改你已有的 state 变量，但会触发重新渲染。 import { useState } from 'react'; export default functi 阅读全文

posted @ 2026-04-10 15:33 打杂滴阅读(10) 评论(0) 推荐(0) |

react渲染与提交

摘要：在 React 18 中，createRoot 是用于创建 React 根节点的函数，它允许你将 React 组件渲染到浏览器 DOM 节点中。 const root = createRoot(document.getElementById('root')) root.render(<Gallery 阅读全文

posted @ 2026-04-09 16:06 打杂滴阅读(20) 评论(0) 推荐(0) |

react 交互-响应事件

摘要：界面上的控件会根据用户的输入而更新。例如，点击按钮切换轮播图的展示。在 React 中，随时间变化的数据被称为状态（state）。你可以向任何组件添加状态，并按需进行更新。响应事件 React 允许你向 JSX 中添加事件处理程序。事件处理程序是你自己的函数，它将在用户交互时被触发，如点击、悬停、阅读全文

posted @ 2026-04-08 14:43 打杂滴阅读(13) 评论(0) 推荐(0) |

React 函数定义方式

摘要：1. React中支持多种函数定义方式，包括函数声明、箭头函数和匿名函数。2. 函数声明使用function关键字，具有变量提升特性。3. 箭头函数语法简洁，自动绑定this上下文，适合事件处理。4. 匿名函数通常作为函数表达式使用，常用于回调函数。5. 在React组件中，箭头函数和匿名函数常用于阅读全文

posted @ 2026-04-07 18:01 打杂滴阅读(10) 评论(0) 推荐(0) |

React UI 渲染树

摘要：渲染树组件的一个主要特性是能够由其他组件组合而成。在嵌套组件中有父组件和子组件的概念，其中每个父组件本身可能是另一个组件的子组件。当渲染 React 应用程序时，可以在一个称为渲染树的树中建模这种关系。 quotes.js 如下（名言/引文）： // eslint-disable-next- 阅读全文

posted @ 2026-04-03 17:21 打杂滴阅读(9) 评论(0) 推荐(0) |

react 保持组件纯粹

摘要：纯函数：组件作为公式在计算机科学中（尤其是函数式编程的世界中），纯函数通常具有如下特征：只负责自己的任务。它不会更改在该函数调用前就已存在的对象或变量。输入相同，则输出相同。给定相同的输入，纯函数应总是返回相同的结果。 function Cup({ guest }) { return <h2> 阅读全文

posted @ 2026-04-03 13:20 打杂滴阅读(12) 评论(0) 推荐(0) |

React渲染列表

摘要：在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。 const people = [ '凯瑟琳·约翰逊: 数学家', '马里奥·莫利纳: 化学家', '穆罕默德·阿卜杜勒·萨拉姆: 物理学家', '珀西·莱温·朱利亚: 化学家', '苏布拉马尼扬· 阅读全文

posted @ 2026-04-03 11:27 打杂滴阅读(6) 评论(0) 推荐(0) |

React 条件渲染

摘要：通常你的组件会需要根据不同的情况显示不同的内容。在 React 中，你可以通过使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。 if: function Item({ name, isPacked }) { if(isPacked) { return <l 阅读全文

posted @ 2026-04-03 09:37 打杂滴阅读(8) 评论(0) 推荐(0) |

react 将 Props 传递给组件

摘要：React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。Props 可能会让你想起 HTML 属性，但你可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。 ‌React 中的 props 是父组件向子组件传递数据的“输阅读全文

posted @ 2026-04-02 14:37 打杂滴阅读(15) 评论(0) 推荐(0) |

React 在 JSX 中通过大括号使用 JavaScript

摘要：JSX 允许你在 JavaScript 中编写类似 HTML 的标签，从而使渲染的逻辑和内容可以写在一起。有时候，你可能想要在标签中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下，你可以在 JSX 的大括号内来编写 JavaScript。使用引号传递字符串当你想把一个字符串属阅读全文

posted @ 2026-04-02 11:45 打杂滴阅读(13) 评论(0) 推荐(0) |

React使用 JSX 书写标签语言

摘要：JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。 JSX: 将标签引入 JavaScript 网页是构建在 HTML、CSS 阅读全文

posted @ 2026-04-02 11:16 打杂滴阅读(11) 评论(0) 推荐(0) |

react 组件导入导出

摘要：在 React 中，根组件（Root Component）是应用的入口组件，也是整个 React 组件树的起点。它通常被渲染到 HTML 文档中的一个特定 DOM 元素上，比如 index.html 文件中的 <div id="root"></div> 元素。根组件的主要作用是组织和渲染其他子组件阅读全文

posted @ 2026-04-02 09:28 打杂滴阅读(18) 评论(0) 推荐(0) |

使用VS Code 生成 React 简单问候页面的完整步骤

摘要：第一步：环境准备‌ 访问 Node.js 官网下载并安装最新 LTS 版本安装 VS Code 编辑器安装 VS Code 插件：ES7+ React/Redux snippets、ESLint、Prettier第二步：项目初始化‌ 打开 VS Code 终端（Terminal > New Term 阅读全文

posted @ 2026-03-26 13:28 打杂滴阅读(16) 评论(0) 推荐(0) |

React 入门

摘要：JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许开发者在 JavaScript 代码中使用类似 HTML 的语法来描述用户界面。虽然 JSX 看起来像 HTML，但它实际上是一种语法糖，最终会被编译成标准的 JavaScript 对象，通常是 React.cre 阅读全文

posted @ 2026-03-26 11:22 打杂滴阅读(9) 评论(0) 推荐(0) |

摘要：React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 React 特点 1.声明式设计 −React采用声明范式，可以轻松描述阅读全文

posted @ 2021-01-10 16:13 打杂滴阅读(270) 评论(0) 推荐(0) |

努力，奋斗

公告

随笔分类 - React