2024 年 React学习笔记（一）

最新推荐文章于 2024-04-27 23:15:17 发布

苍溟丶

最新推荐文章于 2024-04-27 23:15:17 发布

阅读量237

点赞数 1

文章标签： react.js 学习笔记

本文链接：https://blog.csdn.net/y1258429182/article/details/136589170

版权

MacOs 配置环境

brew 安装
nvm 安装
create-react-app 安装

代码配置如下

# 安装 nvm 
brew install nvm
#  安装 create-react-app
npm install -g create-react-app
# 初始化项目
npx create-react-app react-basic

优惠劵

苍溟丶

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2024 年 React学习笔记（一）

【代码】2024 年 React学习笔记（一）
复制链接

扫一扫

React学习笔记之条件渲染（一）

01-19

在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍：条件渲染可以根据state的值进行组件的条件渲染。例如： function ...

React学习笔记

EUEY的博客

03-26

1761

React学习笔记（持续更新）一、基础 1.概念 React是用于构建用户界面的JavaScript库（只关注视） 2.特点声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。 3.高效原因使用虚拟(virtual)DOM,不总是直接操作页面真

参与评论您还未登录，请先登录后发表或查看评论

React 学习笔记

weixin_41184962的博客

04-25

4279

1. react- 用于构建用户界面的javaScript 库react 是一个将数据渲染微HTML视图的开源 JavaScript库2. facebook开发，且开源3. 原生JavaScript 原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。使用javascript直接操作DOM,浏览器会进行大量的重绘重排。原生JavaScript没有组件化编码方案，代码复用率低。4. react 特点 react 核心库和re

react学习笔记（完整版 7万字超详细）

qq_51986661的博客

02-09

3039

React学习笔记，适合刚开始或者对react有一定理解的更快的学习react

React学习笔记（二）

qq_45243719的博客

02-05

1737

{show && <div>是否展示

react 学习笔记

11-16

react 学习笔记，自己学习过程中记录的内容。react component 生命周期，整合eslint插件

React学习笔记之高阶组件应用

01-19

是什么高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。...class Hello extends React.Component { // } 如何实现属性代理下面的例子是最简单的一个实现 function hoc(Impo

React学习笔记之事件处理（二）

12-09

之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...

React学习笔记之列表渲染示例详解

01-19

本文主要给大家介绍了关于React列表渲染的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。示例详解：列表渲染也很简单，利用map方法返回一个新的渲染列表即可，例如： const ...

在React函数组件中使用错误边界和errorElement进行错误处理

笔记、经验、日常分享

04-24

389

ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。如果需要为嵌套的组件树提供错误边界,你仍然需要使用。组件树中发生错误,React 会自动卸载组件树,并替换为传递给。是一种更通用的错误处理方式,可用于任何组件及其子组件树。在 React 18 中,你可以在根组件上使用。

react引入iconfont的svg图标

qq_23858785的博客

04-23

353

react引入iconfont的svg图标

【2024官方文档版学习笔记】React-脱围机制

不被定义的程序媛写的博客儿

04-24

1026

React 有一些内置 Hook，例如useStateuseContext和useEffect。有时你需要一个用途更特殊的 Hook：例如获取数据，记录用户是否在线或者连接聊天室。虽然 React 中可能没有这些 Hook，但是你可以根据应用需求创建自己的 Hook。学习链接祝大家学习顺利。

react之渲染与props

weixin_73918953的博客

04-23

942

要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。你可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时，你可以设置 state。

如何在React中构建动态下拉组件 - 解释React复合组件模式

晓风晓浪

04-23

483

下拉菜单长期以来一直是网站和应用程序中的重要组成部分。它们是用户交互的默默英雄，通过简单的点击或轻触默默地促进着无数的操作和决策。今天你可能已经遇到了其中之一，无论是在你最喜爱的在线商店上选择类别，还是在注册表单上选择你的出生日期。但如果我告诉你，有一个秘密配方可以将你的下拉菜单从平凡提升到华丽呢？加入我，我将解剖复合组件模式的奥秘，并利用其能力构建一个动态下拉组件。（本文视频讲解：java567.com）

【React Router】快速使用

小秀的博客

04-22

496

Outlet：相当于 Vue Router 的 router-view；需要有嵌套 ROute 或者 useRoutes 中使用children 属性的配置，children 对应一个数组，数组里是一个个路由。NavLink：和 Link 一样会被渲染为 a 标签，和 Link 的区别是他有一个名为 active 的激活样式，所以一般用于顶部或者左侧导航栏的跳转。Navigate：重定向，类似于 useNavigate 的返回值函数，但这个是组件。Route：书写对应的路由和对应的组件。

day04--react中state的简化

weixin_51938803的博客

04-27

224

答：对于创建一个实例对象时，我们对要传进来的数据进行接收，那么我们必须要写一个构造器来接收传进来的数据，但是如果我们要定义的数据是固定的，那么就可以不使用构造器的形式，而是使用赋值语句的方式定义一个属性接收数据。既然我们要传的数据是固定的，那么就不需要构造器，直接使用赋值语句的方式定义属性，那么通过赋值语句定义的属性都会放在实例对象身上。而对于下面的switchover 方法来说，必须使用箭头函数的形式，此时的this指向的就是实例对象，否则this为undefined。state是在构造器里面定义的。

react经验13：使用非react封装的富文本组件

Comvir的专栏

04-23

295

已知开源社区已经有react封装的富文本组件，一般的文本编辑需求足够满足，但是当有特殊需求无法满足时，可能需要用到非react封装的富文本组件。当使用非react封装的富文本编辑器时，react组件内的state与编辑器的内容交换有点小毛病，本经验给出解决思路。

react之state深入浅出

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交