码飞_CC的博客

但此篇文章就不展开一一赘述了，这里仅回归到本文探讨的问题：组件的一次更新流程，在视图真正刷新之前的部分都是可能被多次调用的，因而这些部分中不能出现副作用，开发环境下会刻意触发两次以使得开发者能注意到误用的副作用。会调用2次的情况，依赖数组明明没有变化，怎么会调用2次？百思不得其解，依赖没变化的话，那肯定是整个组件重渲染了。不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。是一个用来检查项目中潜在问题的工具。这怎么都渲染了2次！在开发React项目的时候，发现。后来查了一下，原来是。

Ant Design 作为一款备受欢迎的 UI 组件库，不仅功能强大，还非常注重用户体验。在官网上还特别推荐了一系列其他实用的工具库，这些工具库能够与 Ant Design 形成互补，提供更为全面和高效的解决方案。

从 React 18 版本开始，会默认自动进行批处理（automatic batching），减少组件的重复渲染，以此提升性能。本篇文章主要介绍以下的内容：什么是批处理、它以前是如何工作的，以及现在发生了什么变化。......

随着部门业务的不断增大，流量渠道的不断增加，公司对于个性化报表与数据分析的需求越来越强烈。非技术同学常常需要依赖 BI 来生成报表，而 BI 的人力有限，无法高效地支撑日常运营的报表与分析的需求。此外，因不同人员构建 SQL 语句的不同，即使是同一指标也可能导致数据口径不统一从而造成沟通上的隔阂。为了满足高效的数据报表生成与分析需求， 实现更加精细的数字化运营目标，低使用门槛的自主数据分析平台 Bee-Known 应运而生。本文主要介绍自主数据分析平台前端的架构设.........

React 18 正式版出来了，这篇文章感觉还不错，转载分享给大家原文： React 18 全览在 2021 年 6 月 8 号，React 公布了 v18 版本的发布计划，并发布了 alpha 版本。经过将近一年的发布前准备，在 2022 年 3 月 29 日，React 18 正式版终于和大家见面了。React 18 应该是最近几年的一个重磅版本，React 官方对它寄予了厚望。不然也不会将 React 17 作为一个过渡版本，也不会光发布准备工作就做了一年。在过去一年，我们已经或多或少了解到一

有了 Hooks 以后，我们几乎就不需要 super 和 this 了，感兴趣的可以一看，了解背后的原理。本篇文章转载自Dan(React开发成员)的个人博客： Why Do We Write super(props)?首先，在这一生中，super(props) 出现在我代码里的次数比我知道的还要多：class Checkbox extends React.Component { constructor(props) { super(props); this.state = { i

本篇文章主要讲解JSX的来龙去脉，不讲解JSX的语法（不了解的可参考：JSX 简介）。如果你对以下三个问题能够清晰解答，本篇文章就可以不用看了。JSX 的本质是什么，它和 JS 之间到底是什么关系？为什么要用 JSX？不用会有什么后果？JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？如果不能清晰地回答，那希望看完本篇文章你能有所收获。先举个小例子让你回忆一下JSX，以下代码中函数组件App中返回的部分即为JSX（<div className="App">Hello Wo

项目开发中，我们时常会遇到使用Modal弹窗和Form组件搭配实现编辑已有条目和新增条目的功能（如下图），这两个功能所使用到的表单是一样的，唯一的不同点是：编辑条目是要将已有的信息填入表单，而新增条目是表单所有字段为空。既然表单是一样的，我们当然不想重复代码。刚开始的想法是往Form组件传入默认值的方式来实现编辑时的填充功能。该方法编辑的时候表单确实是有传入值填充，但是关闭Modal再点击新增时，发现Form表单还是有值填充，这不符合我们的要求，查看文档发现了一条信息：<Modal />

本文主要讲解通过发布-订阅模式驱动数据流，来实现React中组件间的通信。React是单向数据流的，也就是将数据以props属性的方式流向组件树中比自己层级更低的组件。组件间通信的方式常见的主要有以下几种：父-子组件间通信：这个最常见也很容易，父组件直接把数据以props的方式传递给子组件即可。子-父组件间通信：因为数据只能单向流动的，所以子组件并不能直接将数据传递给父组件。但是props的形式是可以多种多样，所以我们可以通过将父元素中绑定了自身上下文的函数以props的形式传递给子组件，然后子组件

这里记录一下React开发过程中遇到的一个Waring及解决方法。一个Input输入框，当你在输入框中输入时，控制台显示Waring，Console 输出如下：Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide

文章目录1. 前期：分散开发时的阶段2.中期：统一的阶段3. 后期：单次访问只发起1次请求大家在网购或者寄快递时，应该都有碰到地址选择栏，也就是选择省市区。我在开发一个国外快递官网的时候也遇到了这个需求，在这个项目中，由于国外业务刚展开，并不是所有区域都可选的，需要人工维护这份数据（时常会改动），所以地址信息是由后端维护的，当前端页面遇到需输入地址的地方，就向后端发起地址数据的请求。在这，我记...

文章目录前言处理方式1：防抖处理方式2：采用标记前言在日常工作中，我们经常接触到表单验证相关的功能。有些简单的校验（比如输入要求为手机号、邮箱、密码的字符组合等）可以直接由前端进行判断，但是有些复杂多变的判断（比如校验用户名是否存在、特殊行政区提示等）就必须发起请求由后端来验证，然后前端根据后端返回的结果进行提示等处理（这里称该校验的方式为异步校验）。处理方式1：防抖异步校验（选择框）存在...

文章目录前言防抖（debounce）节流（throttle）两个比喻来帮助区分防抖和节流前言开门见山，使用防抖和节流技术的意义：节约资源，提升用户体验。浏览器中有许多事件会在很小时间间隔内频繁触发，比如：监听用户的输入（keyup、keydown）、浏览器窗口调整大小和滚动行为（resize、scroll）、鼠标的移动行为（mousemove）等。如果这些事件一触发我们就执行相应的事件处理函...

在web开发时，有时我们遇到问题需要同事帮忙看看，或者是开发的一些移动端的页面需要在真机上测试，这时我们就需要通过IP的方式来访问网页。当然，对方想要通过你的IP来访问网页，你们需要在同一个局域网内才行。解决方法将应用的监听改为0.0.0.0，基于webpack的项目把dev的config文件中的host改为'0.0.0.0'即可。如果别人要通过你的IP来访问的话，需要把防火墙给关闭，如果是自...

  在做基于React项目的时候，我们通常会将一个页面分割成多个可重用的组件以提高系统的可维护性，这其中常常出现子组件之间有通信的情况。举一个下订单例子：地址选择框展开样式如下：  这里简化处理：有一个订单页面（Order.tsx），它包含了两个子组件：地址选择组件（Area.tsx，有省市区三层选择）和邮编组件（Zipcode.tsx，邮编只精确到市，同一个市下面所有的区的邮编是一样的）...

  有一个需求：一个元素块A本来在页面中的正常位置，随着滚动条向下滚动到该元素块时变为固定在浏览器顶端，当滚动条向上滚动到元素块A时又恢复到原来的位置。  解决方法：我们首先在react组件中添加一个boolean类型的状态needFixed，用于判断该元素块A是否需要固定。然后在通过document.getElementById('A_ID').offsetTop获取需要固定的元素块A距...

react-tagsinput是用于标签输入的一个简单易用的高可定制React组件（npm地址：https://www.npmjs.com/package/react-tagsinput），由于对npm的原理还不是很熟，故闹出了一些笑话。1. 安装使用： 命令：npm install react-tagsinput --save 2. 在项目中导入：语句：import TagsInput ...