React.js
关注
分享
扫一扫
文章平均质量分 87
学习React.js笔记
夏安
这个作者很懒，什么都没留下…
展开
-
深入了解 useLayoutEffect
近年来，React 已经在不断变化的 Web 开发领域巩固了自己的地位，成为构建高性能和交互式用户界面的最有效方法之一。随着 Hooks 新特性的引入，React 彻底改变了开发人员在函数组件中管理有状态和可重用逻辑的方式。在本文中，我们将深入探索`useLayoutEffect`hook、它与 `useEffect` 的不同之处，并学习如何正确地利用其功能来增强用户体验。原创 2023-06-22 13:46:49 · 2488 阅读 · 0 评论 -
推荐 8 个 React 可视化库
在构建网站或应用程序时，有无数种方法可以在工作中显示图表。你可以决定从头开始构建你的图表，或者使用许多可用的 React 可视化库。在本文中，我们将比较 React 应用程序的 8 个顶级可视化库。原创 2023-02-22 22:21:07 · 2317 阅读 · 2 评论 -
React useRef 指南
在本文中，我们将讨论使用 ref 访问 DOM 的 React `useRef` 钩子，以及 `ref` 和 `useRef` 之间的区别。原创 2022-10-30 16:14:40 · 2366 阅读 · 0 评论 -
浅谈 React 和 TypeScript 开发中的泛型实践
泛型是TypeScript中的一个重要部分：它们看起来很奇怪，它们的目的不明显，而且它们可能很难分析。本文旨在帮助你理解和揭开TypeScript泛型的神秘面纱，特别是它们在React中的应用。原创 2022-10-29 22:35:07 · 2040 阅读 · 0 评论 -
在 useEffect 中使用异步函数指南
useEffe通常是React中进行数据获取的地方。数据获取意味着使用异步函数，在useEffect中使用它们不像你想象的那么简单。看完本文，你将会真正掌握在useEffect中使用异步函数的正确姿态原创 2022-10-28 23:20:20 · 4234 阅读 · 0 评论 -
深入了解 React 中的虚拟 DOM
虚拟DOM是React的一个基本概念。你可能听说过它，然而你可能不理解它是如何工作的以及React为什么使用它。本文将介绍什么是虚拟DOM，它在React中的好处，以及帮助解释这个概念的实际示例代码。原创 2022-10-23 14:34:52 · 871 阅读 · 1 评论 -
深入浅出 React 18 中的严格模式
在本文中，你将了解严格模式以及引入它的初衷。你将了解它的各种特性，以及 v18 版本如何改进其 API 并提供与 hook 更好的兼容性。原创 2022-10-17 15:32:41 · 1771 阅读 · 0 评论 -
使用 useState 需要注意的 5 个问题
useState hook 可能很难理解，特别是对于新手React开发人员或从基于类的组件迁移到函数组件的开发人员。在本文中，我们将探讨使用useState需要注意的5个问题，以及如何避免它们。原创 2022-10-15 13:51:30 · 2079 阅读 · 1 评论 -
你必须了解的 React 18 新特性
这是一个全新的概念，而不是一个功能，使 React 应用程序运行在 React 18 及更高版本上，优化它们在客户端设备上的性能。即使在了解了 React 17 和 React 18 之间的区别之后，你可能仍然不确定是切换到 React 18 还是坚持使用 React 17。这篇文章将讨论 React 18 是什么，React 17 的问题，React 18 的新特性，以及为什么你应该使用最新版本。只有在事件回调函数结束时所有的状态都被更改之后，然后触发一个单独的 re-render，合并所有更新。原创 2022-10-10 22:36:54 · 2219 阅读 · 0 评论 -
一文让你彻底理解 React Fragment
在本文中，你将了解 React Fragment。首先了解了 React Fragment 是什么，以及什么时候在 React 应用程序中使用它。然后进一步演示了如何在实际应用中使用它。原创 2022-10-09 19:32:24 · 2886 阅读 · 1 评论 -
React 错误边界指南
虽然在错误到达生产环境之前捕获错误是理想的，但是其中一些错误（例如网络错误）可能会通过测试而影响用户。如果你的 React 组件没有正确地捕捉到第三方库或 React Hooks 抛出的错误，这样的错误要么导致 React 生命周期崩溃，要么到达主执行线程的顶层，导致“白屏”场景：在React 16中，没有捕捉到的错误[…]将导致整个 React 组件树被卸载您的应用程序通过提供适当的可视化反馈和潜在操作（例如：重试机制）来优雅地处理此类错误是至关重要的。原创 2022-09-28 13:42:58 · 1852 阅读 · 0 评论 -
深入了解 useMemo 和 useCallback
许多人对 `useMemo` 和 `useCallback`的理解和使用都不太正确，他们都对这两个钩子感到困惑。本文中的目标就是要澄清所有这些困惑。本文将学习它们是做什么的，为什么它们是有用的，以及如何最大限度地利用它们。本文的目的是帮助初学者 or 中级 React 开发人员更好地使用 React。如果你刚刚开始使用 React，你可能会希望将这篇文章收藏起来，几周后再回来看它！原创 2022-09-21 15:00:42 · 4677 阅读 · 3 评论 -
React 中非受控和受控的组件
React 中非受控和受控的组件React 中非受控和受控的组件受控的组件非受控的组件小结React 中非受控和受控的组件两者都是呈现 HTML 表单元素的 React 组件。这意味着，每当您创建具有 HTML 表单的组件时，您都会创建两个组件中的任何一个。但是两者之间的显着差异，接下来我们来我们来详细介绍它们。受控的组件在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而原创 2022-04-13 10:26:00 · 647 阅读 · 0 评论 -
浅谈 React 生命周期
浅谈 React 生命周期浅谈 React 生命周期旧版的生命周期新版的生命周期详解各个生命周期函数constructorgetDerivedStateFromPropsrendercomponentDidMountshouldComponentUpdategetSnapshotBeforeUpdatecomponentDidUpdatecomponentWillUnmount过时的生命周期方法UNSAFE_componentWillMountUNSAFE_componentWillReceiveProps原创 2022-04-03 15:58:44 · 1195 阅读 · 0 评论 -
React 中的useState 和 setState 的执行机制
React 中的useState 和 setState 的执行机制useState 和 setState 在React开发过程中 使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制，例如：**它们是同步的还是异步的？**正因为没有理解它们，才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。它们是同步的还是异步的？setState和 useState 只在合成事件如onClick等和钩子函数包括componentDidMount、useEffect等中是“异步原创 2022-02-07 19:37:11 · 4861 阅读 · 0 评论 -
快速上手 React Hook
快速上手 React Hook 快速上手 React Hook1. Hook 和函数组件2. useState3. useEffect3.1 无需清除的 effect3.2 需要清除的 effect3.3 性能优化4. useContext5. useMemo6. useCallback7. useRef8. useImperativeHandle9. useLayoutEffect10. useReducer11. Hook 规则12. 自定义 Hook快速上手 React HookHook 是 Re原创 2022-02-07 19:36:02 · 281 阅读 · 1 评论 -
Electron结合React，在渲染进程中使用 node 模块
Electron结合React，在渲染进程中使用 node 模块问题将create-react-app与electron集成在了一个项目中。但是在React中无法使用electron。当在React中使用require('electron')时就会报TypeError: fs.existsSync is not a function的错误。因为React中无法使用Node.js的模块.解决方法创建preload.js文件在项目目录下新建preload.js文件,该文件是预加载的js文件，并且在原创 2021-07-14 14:53:37 · 850 阅读 · 0 评论 -
React项目打包并部署到 Github 展示预览效果
React项目打包并部署到 Github 展示预览效果当开发者模式结束，准备打包的时进行以下步骤：在package.json配置文件中加一句： "homepage": "."（为下面打包做准备，如果不加这句话，那么在预览时开启的页面空白，原因路径不对）npm build or yarn build（打包）在你的GitHub上新建个仓库，把地址复制下来备用项目所在文件夹下git initgit add .git commit -m "提交信息"git remote add origin ht原创 2021-05-18 22:00:26 · 494 阅读 · 0 评论 -
React路由
React路由安装react-router相关标签简单路由跳转嵌套路由跳转安装// npmnpm install react-router-dom// yarnyarn add react-router-domreact-router相关标签react-router常用的组件有以下八个：import { BrowserRouter, HashRouter, Route, Redirect, Switch, Link, NavLink, withRoute原创 2021-04-15 20:24:35 · 152 阅读 · 0 评论 -
React + 导入模块的一个错误
导入模块的时候出现这个错误：Attempted import error: 'd3' does not contain a default export (imported as 'd3').把导入方式import d3 from 'd3'改成import * as d3 from 'd3'原创 2020-09-02 10:19:06 · 2297 阅读 · 1 评论 -
redux 的简单实用案例
redux 的简单实用案例整体思想与结构创建一个Action创建一个Reducer创建Store在App组件开始使用整体思想与结构文件目录如下：构建 action，通过创建一个函数，然后返回一个对象，注意需要携带 type 属性构建 reducer，用来响应 action，然后通过 return 把数据传回给 store利用 createStore 来构建 store，构建的时候传递我们写好的reducer利用 store.subscribe() 注册监听当我们利用store.dis原创 2020-07-19 16:41:45 · 314 阅读 · 0 评论 -
React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用该项目实现了一个简单的表单输入添加列表的内容代码如下<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/um原创 2020-07-04 19:47:04 · 261 阅读 · 0 评论