二三的博客

面向组件编程1. 创建函数式组件2. 创建类式组件1. 创建函数式组件// 1. 创建函数式组件function MyComponent () { console.log(this) // 此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件</h2>// 2. 渲染组件到页面ReactDom.render(<MyComponent/>, document.getElementById('tes

vue-cli、create-react-app等常用工具安装、更新、查看版本等操作命令汇总

组件实例三大核心属性1. state  1. 理解  2. 注意2. props  1. 理解  2. 作用refs1. state  1. 理解state 是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）组件被称为“状态机”，通过更新组件的 state 来更新对应的页面显示（重新渲染组件）  2. 注意组件中 render 方法中的 this 为组件实例对象组件自定义的方法中 this 为 un

React组件生命周期理解旧生命周期1. 组件挂载时的执行过程：2. 组件更新时的执行过程:1. setState() 更新state（正常更新）2. 调用forceUpdate()时（强制更新）3. 父组件render(父组件渲染)3. 生命周期阶段1. 初始化阶段2. 更新阶段3. 卸载组件新生命周期理解组件对象从创建到死亡，它会经历特定阶段react组件对象包含一系列钩子函数（生命周期回调函数），在特定的时刻调用我们在定义组件时，在特定的生命周期回调函数中做特定的事情旧生命周期com

使用create-react-app创建react应用1. react脚手架2. 创建项目并启动3. 脚手架文件介绍1. react脚手架      1. xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目            1. 包含了所有需要的配置（语法检查、jsx编译、devServer...）&nb

react基础介绍1. React是什么2. 为什么要学React3. React的特点3.1 React高效的原因4. 相关JS库5. 关于虚拟DOM 与 真实DOM6. JSX1. React是什么react是一个将数据渲染为HTML视图的开源JavaScript库2. 为什么要学React原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI ）。使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。原生JavaScript没有组件化编码方案，代码复用率低。

useReducer实际上是 useState 的升级版，都是用来存储和更新 state，只是应用的场景不一样。一般情况下，我们使用useState就足够项目需要了，不多当遇到以下场景时，使用useReducer 会更好些。

Form 内置方法，不是响应式的（即不是一个state），由其设置或者获取的值，不会触发UI更新，只能对变更的field进行刷新。想要对其进行监听也很简单，将其变成一个state即可。

的一个泛型，表示 函数式组件，是 function component 的缩写。于是换了种写法，子组件使用普通的函数式写法，此时搭配。包裹，方便获取子组件的特定方法和状态。可以让函数组件定义更加清晰和类型安全。此时，父组件上绑定 ref 不会报错。开发中，遇到了这样一个问题：使用。绑定在DOM上面不应该会报错才对。定义一个函数式组件，然后使用。首先，我们先了解下什么是。

react 用了一年多，但一直对 redux 了解不多，一直想找个机会彻底掌握它，所以有了今天这篇文章，如果你也对 redux 不够了解，那么可以仔细阅读下，相信会有所收获。

当我们在首次使用yarn dev命令启动vite时，或者切换分支，依赖项发生变化时会发现项目启动时相当的慢，大概要十几分钟，而且控制台终端打印了如下信息：遇到这种情况时，真的是相当恶心，有时候项目启动完成要花费半小时的时间，着实是浪费时间。知道了问题出在哪里，就能对症下药，问题也会很快妥善解决。

项目开发中，产品经理提了这样一个需求：将系统中的附件实现批量打包下载功能。本来系统中是有单个下载及批量下载功能，现在应业务方的需求，需要多加个批量打包下载。初步设想是：由后端编写接口实现。但后来经过思考：现在系统中已经有文件的url地址了，何必让后端写接口重复，前端处理就行。

文件下载在前端系统里面算是个比较常见的功能，尤其是在管理系统里面。本篇文章我记录下前端通过后端返回的文件url 实现文件下载的几种方法，包含批量下载。

创建一个Context对象，当React渲染一个订阅了这个Context对象的组件，这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。只有当组件所处的树中没有匹配到Provider时，其才会生效。

项目开发中，需要做一个报表功能，看了下UI图，初步定下使用echarts，不过之前使用echarts都是在Vue2和Vue3框架下开发，第一次使用开发 echarts，将流程及一些 相关配置 写个随笔记录下。

在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。

前段时间，使用公司的 Jenkins 构建测试环境时，突然构建失败，查看了构建日志，显示没有找到这个包。但奇怪的是，代码在本地运行没问题，甚至使用yarn build命令 进行本地打包也正常，只是构建环境失败。如下如所示：这个报错出现的就很莫名其妙，上午的时候，代码还在正常构建，下午就突然不行了，而且这个包貌似这段时间也没下载过，也没有关注过。但没办法，测试环境还是要构建的，项目需要上线，必须经过构建，毕竟是打工人嘛，只能想办法解决。于是在网上冲浪寻找答案。网上的两种方法，无非是删除目录，重新。

react-router-dom 如今已经升级到了V6版本，相比较V5版本，变化还是挺大的。如今使用命令来下载，会自动下载V6版本，V6版本会在接下来的一段时间内成为主流。不过对于用习惯了V5版本的开发者而言，自然是有些不习惯。本篇文章就记录下如何降低为v5版本的两种方法。

使用vite创建项目，node 版本需要大于12.0.0，可以使用node -v查看自己当前的node版本。

记录在项目开发中遇到问题的解决方案，方便以后遇到快速解决！在该react hooks 页面中，图纸计划附件表格是一个子组件。其中 【单体】和【专业】两个下拉select选择框，数据来源依赖于【厂区】。后端给的接口，必须要先选择【厂区】，才能获取到【单体】数据；选择【单体】后，才能获取【专业】数据。提测后，测试提了一个bug：**数据进行修改，页面渲染数据完成后，切换不同单体，专业数据应清空

在一个父组件中，我们想要获取到其中的节点元素或者子组件实例，从而直接调用其上面的方法。Class 类组件和函数组件是两种不同的写法。父组件使用useRef创建一个 ref 对象，将这个 ref 对象赋给子组件的 ref 属性。子组件使用forwardRef包裹自己，允许作为函数组件的自己使用 ref。然后使用钩子函数，在该钩子函数的第二个函数参数中返回一些状态或方法，这个被返回的状态或方法就可以被父组件访问到。父组件使用创建的 ref 对象的current属性获取子组件暴露出的状态或方法。

useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是useState更新异步的问题。比如我们把接口返回的数据，使用useState储存起来，但是当后面去改变这个数据的时候，每次拿到的都是上次的数据，无法实时更新。或者我们在函数内部使用 setState ，然后立即打印 state，打印的结果还是第一次的state 的值。比如下面的代码实例。

我们知道，对于子组件或者节点，如果是class类，存在实例，可以通过 React.createRef() 挂载到节点或者组件上，然后通过 this 获取到该节点或组件。但是在子组件是函数组件的时候，因为函数组件没有实例，所以在正常情况下， ref 是不能挂载函数组件上的。那么此时，我们通过和forwardRef配合就能达到效果。.........

我们知道，react的hook组件再state和props发生改变时，会重新渲染组件，从而导致子组件也会被重新渲染，但有些时候，子组件的props和state值没有变化，子组件就没必要重新渲染，因为如果子组件是一个大型的组件树，这种情况下虚拟DOM（VirtualDom）的比较明显是很浪费资源的，此时就可以进行优化。在我的上一篇博客中有写到，，可以使用React.memo函数包裹子组件，这样在传递给子组件的props的值没有改变时，子组件就不会重新渲染。但是当子组件中的props中还存在函数属性因此而生。.

在我的上一篇博客中有提到memo是通过对props值的浅比较来决定该组件是否需要更新的，当遇到层级比较深的复杂对象时，就会有些力不从心，对于特定的业务场景，可能需要类似shouleComponentUpdate这样的API，这时可以通过memo的第二个传参来实现。与shouldComponentUpdate不同的是，arePropsEqual返回true时，不会触发render，返回false时则会触发，与shouldComponent正好相反。......

React.Memo是React16.6新的一个API,用来缓存组件的渲染，避免不必要的更新，也是一个高阶组件，与类组件的十分类似，不同点在于，React.Memo只能用于函数组件。在react中，组件渲染是最常有的事情。但是，有部分的组件渲染时不必要的，是可以避免的。在react的一般规则中，只有父组件的某一个状态改变，父组件下面所有的子组件不论是否使用了该状态，都会进行重新渲染，这可以称之为无效渲染。...

web开发过程中，需要用到弹框的地方很多，有时候，产品经理的原型是全屏弹框，而常用的组件库里封装的一般都不是全屏的。如下图所示这就是一个全屏弹框。

问题：文件上传失败时不需要回显。思路：添加fileList属性，绑定一个列表，上传成功的文件才加入列表中，代码如下：const [ imgFileList, setImgFileList ] = useState<any[]>([]); <Upload name='upload_file' action="/file/upload/v4" //这个路径是我项目中封装好的路径接口，根据自己的项目接口替换 accept='image/jpeg,image/jpg,