【React】相关
文章平均质量分 81
Web 前端框架 React 相关
江湖人称菠萝包
这个作者很懒,什么都没留下…
展开
-
【React】《React 学习手册 (第2版) 》笔记-汇总
Array.reduceRight 的作用与 Array.reduce 相同,只不过不从数组开头开始归约,而是从数组末尾开始。把数组转换成对象。原创 2024-06-20 00:30:00 · 994 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter12-React 服务器端渲染
这个组件可以直接在浏览器渲染,也可以捕获输出的 HTML 字符串,在其他环境中渲染。我们可以构建同构应用,在不同的平台中渲染组件,还可以通过一定的架构方式,跨多个平台全局重用 JavaScript 代码。我们伺服 Create React App 生成的 build 文件夹,在浏览器中运行 HTML,通过 script.js 文件加载所需的 JavaScript 代码。有了 Node.js,我们可以在其他应用,例如服务器端应用、CLI 应用,甚至是原生应用中重用为浏览器编写的代码。原创 2024-06-20 00:15:00 · 856 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter11-React Router
嵌套路由时,若想显示嵌套内的组件(比如上面的 History),我们要使用 React Router DOM 的另一个特性:Outlet 组件。Router 组件只能使用一次,要路由的组件都嵌套在这个组件中。所有 Route 组件都嵌套在 Routes 组件中,根据浏览器中的当前地址选择渲染哪个组件。Router 组件把当前地址的有关信息传给内部嵌套的子组件。要渲染的各个路由嵌套在名为 Routes 的组件中。路由器的作用是为网站中的各部分设置路由。一个路由就是一个端点,即可在浏览器的地址栏中输入的地址。原创 2024-06-19 00:30:00 · 952 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter10-React 测试
对 React 项目来说,绝对应该安装 eslint-plugin-react-hooks 插件(https://reactjs.org/docs/hooks-rules.html),实施 React Hooks 相关的规则。开源的 TypeScript 是 JavaScript 的超集,为 JavaScript 语言添加了一些额外的特性。我们将使用一个名为 eslint-plugin-react(https://www.npmjs.com/package/eslint-plugin-react)的插件。原创 2024-06-19 00:15:00 · 951 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter9-Suspense
只不过,ErrorBoundary 组件在出现错误时回落到一个错误消息,而 Suspense 组件在惰性加载组件时渲染一个消息,提示正在加载中。发生变化时,React 以 JavaScript 对象的形式创建一份组件树副本,找出组件树中需要改动的部分,只改动那些部分。创建兼容 Suspense 的数据源只需要一个 promise,因此我们可以定义一个函数,接受一个 promise 为参数,返回一个兼容 Suspense 的数据源。通常,无穷循环并不是我们想要的效果,在 React 中也是如此。原创 2024-06-18 07:30:00 · 1374 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter8-处理数据
倘若在请求的过程中有什么地方出错了,那就可以说 HTTP 请求失败,或者 promise 被拒了。在 Google Chrome 中如果想限制网络速度,单击“Online”旁边的箭头,在打开的菜单中,你可以选择不同的速度,选择“Fast 3G”和“Slow 3G”对网络请求的速度限制较大。前面的例子之所以发送瀑布式请求,是因为组件是一个套一个渲染的,前一个组件未渲染之前不能发起下一个请求。在用户滚动界面的过程中,我们要消除用户已经看过的结果,并渲染位于屏幕范围以外的新结果,随时准备展示。原创 2024-06-18 07:15:00 · 1696 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter7-使用钩子增强组件
多数情况下,你需要的是 useEffect,但是如果要实现的效果对浏览器绘制很重要(屏幕上 UI 元素的外观或位置),那就要使用 useLayoutEffect。由于每次渲染都新声明一个数组,因此在 JavaScript 看来,words 是有变化的,所以每次都会调用“fresh render”效应。调用钩子后,React 在一个数组中保存钩子的值,以便跟踪值。新值,新渲染,新效应。我们知道,渲染始终发生在 useEffect 之前,渲染在前,然后各个效应按顺序运行,而且效应可以访问渲染后所有值。原创 2024-06-17 07:30:00 · 666 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter6-React 状态管理
上下文供应组件可以把对象放入上下文,但是它自己无法修改上下文中的值,需要父级组件的协助。下面例子中,onSelect 属性是一个函数,这个属性的默认值是 f => f,这是一个虚假函数,什么也不做,只是返回传入的参数。在 React 中使用上下文,首先要把数据放入上下文供应组件,并把供应组件添加到组件树中。在 React 的早期版本中,把状态集中管理放在组件树的根部是一个重要的模式,但是在复杂的应用中集中于组件树的根部维护状态不是一件容易的事。渲染上下文供应组件的有状态的组件是一个自定义的供应组件。原创 2024-06-17 07:15:00 · 765 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter5-在 React 中使用 JSX
使用 Babel 的方式有很多种,最容易上手的是直接在 HTML 中通过 CDN 引入 Babel,编译类型为“text/babel”的脚本块中的代码。JSX 是 JavaScript 中的 JS 和 XML 中的 X 的综合体,是对 JavaScript 的扩展,使用一种基于标签的句法直接在 JavaScript 代码中定义 React 元素。然而,这样会导致创建很多非必需的标签,产生很多没什么用的容器。在 JSX 中,元素的类型通过标签指定,标签的属性表示元素的属性,子元素添加在起始和结束标签之间。原创 2024-06-16 08:44:12 · 746 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter4-React 运行机制
浏览器 DOM 由 DOM 元素组成,类似地,React DOM 由 React 元素组成。React 元素是对真正的 DOM 元素的描述。换句话说,React 元素是如何创建浏览器 DOM 的命令。可以把其他 React 元素渲染为子元素,创建一个元素树。在 React 中,组件(component)方便重用相同的结构,只需在结构中填充不同的数据即可。在 React 16 之前的版本中,只能在 DOM 中渲染一个元素。React 应用是由一系列 React 元素构成的树状结构,一切都发端于一个根元素。原创 2024-06-16 08:42:16 · 1035 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter3-JavaScript 函数式编程
Array.reduceRight 的作用与 Array.reduce 相同,只不过不从数组开头开始归约,而是从数组末尾开始。把数组转换成对象。原创 2024-06-15 21:41:14 · 740 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter2-JavaScript 新特性
这意味着,你可以在自己的源码中使用这些语句,Babel 知道在何处寻找你要使用的模块,把找到的模块添加到编译得到的 JavaScript 代码中。此时,我们不等待 promise 成功处理后返回结果再调用一系列 then 函数了,而是让异步函数暂停执行函数中的代码,直到 promise 处理成功。kangax 编辑的兼容表(http://kangax.github.io/compat-table/esnext)是一个很好的参考资源,可以查明最新的 JavaScript 特性在各浏览器中的支持程度。原创 2024-06-15 21:39:29 · 842 阅读 · 0 评论 -
【React】《React 学习手册 (第2版) 》笔记-Chapter1-初识 React
这些工具可通过扩展 Chrome 和 Firefox 中安装,可作为 Safari、IE 和 React Native 的独立应用程序使用。借助开发者工具可以审查 React 组件树、查看属性和状态详情,甚至还可以判断哪些线上网址使用的是 React。在含有 package.json 文件的文件夹中执行 npm install 命令将安装项目中列出的所有包。在 package.json 文件中提供具体的版本信息,以便安装各个包的正确版本。凡是含有 yarn.lock 文件的项目,使用的就是 Yarn。原创 2024-06-15 21:37:48 · 475 阅读 · 0 评论