吴小迪的博客

文章目录组件？从UI层面看组件化组件？等下，你有没有留意到我说了一个很关键的词，叫组件。组件？直观的理解组件是一个什么东西？可拼接，可组合，搭积木，乐高积木? 对，组件就是这样一个神奇的东西，组件可以单独开发，单独使用，把一堆组件拼在一起就可以成为一个更大的组件，更多的组件在一起组合成一个页面，一个应用，一个系统。前几年前端技术更新迭代很快，AngularJS，React.js，Vue.js等类MVC框架横空出世，各领风骚小几年。在这波前端潮流中，带来了组件化这样一个重要的概念。从UI层面看组件

今天分享一下tinymce富文本编辑器做评论区的全过程。二、每个功能的实现1.自定义toolbar的功能区①对应的样式以及意义首先加了一个自定义的icon - 追加评论用的然后加了一个自定义的文字 - 显示隐藏评论区用的2.展示、收起评论区①对应的样式以及意义点击Show/Hide comment控制右侧评论区的显示隐藏【始终显示的话占用空间】首先自己做一个评论区的区域然后我们改一下刚才注册的tinymce的setup里面的showCommentArea的onAction3.选择文

文章目录前言一、什么是jsx?二、那么为什么是这三个参数呢?三、那么为什么不直接在js中写UI呢?四、那么生成的代码怎么变成真的DOM?五、那么为什么不把这玩意和react库封装在一起?六、那么为什么非要一层VDOM呢？七、等等教练，我还有几个个小问题八、为什么要用jsx?九、等下你这些代码里的{}是什么? 为什么不直接在{}里写循环套jsx十、props？属性? 为什么需要属性十一、咦，这个className是什么鬼，为什么不用class?十二、老司机求带啊，有没有其他React技巧前言我们假设你有一

感谢内容提供者：金牛区吴迪软件开发工作室文章目录前言及最终效果展示：一、完整的代码：二、代码解析：1. 首先我们是需要先安包的：2. 安包之后需要进行一个引入：3. 然后我们初始化四个状态4. 新手指导弹窗的效果：5. 控制状态6. return 一个组件三、拓展功能：1. 点击屏幕的时候不关掉引导弹窗2. 点击每一步的时候额外做一些操作【比如点击到最后一步的时候去跳转页面】四、文末笔者留言：前言及最终效果展示：笔者做这个新手指导调研了三个库，最终的效果的话感觉只有intro.js的效果最好，效果.

单元测试是现代软件开发最基本，也普遍落地不力的实践。市面关于React单元测试的文章，普遍停留在“可以如何写”和介绍工具的层面，既未回答“为何必须做单元测试”，也未回答“单元测试的最佳实践”两个关键问题。本文正是要对这两个问题作出回答。本文所用技术栈为前端React栈，测试框架与断言工具是jest。文章将略过对测试框架本身的语法介绍，着眼于“为何做”与“最佳实践”的部分。阅读第二部分的代码，需要读者对JavaScript与React语法有一定了解，但第一部分的原理并不对读者做任何语言上的假设。文章目

感谢内容提供者：金牛区吴迪软件开发工作室文章目录一、认识单元测试二、前端怎么做单测三、使用jest1.配置jest2.测试一个方法3.测试一个组件一、认识单元测试单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义。在 web 前端领域，单元测试通常包括：对某个 JS 的方法进行测试，对某个组件进行测试。除了单元测试，前端经常会有端到端测试。相对于端到端测试来说，单元测试编写更复杂。但是完整的单元测试.

文章开始前需要事先跟朋友声明下，此篇文章仅仅是笔者自己的分析与感想，非官方说明。如有不当之处，欢迎指出。文章目录React Hooks相对高阶组件和Class组件有什么优势/缺点？一、Hooks组件相比于Class组件二、Hooks组件相比于高阶组件React Hooks相对高阶组件和Class组件有什么优势/缺点？一、Hooks组件相比于Class组件首先我认为hooks组件其实是降低了react开发的使用难度的，让新手可以在不使用class组件的情况下依然可以进行项目开发。可能会有朋友感.

项目开发的过程中经常会遇到树状的数据，比如：选城市，选分类，选公司部门等等等等。。。基本上都是保存的树状结构。下面的图就是一个典型的树型结构，id，唯一值name，名字isLeaf，是否是最末级的叶子节点idPath，当前节点与所有父级节点的id以“，”拼接parentId, 父节点id(如果没有父节点则此字段返回值为null)children，孩子节点(如果没有孩子节点则此字段返...

今天我们就来说一下react如何连接钉钉。步骤：一： 首先npm钉钉$ npm install dingtalk-jsapi --save二： 指定文件引入钉钉import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载，也可按需进行加载三： 注意点：（想用钉钉的所有API都需要放在dd.ready()方法里）componentDidMoun...

开发场景：当我们使用react的hook组件的时候想要在组件销毁的时候做一些事件，解决方案：我们可以使用react的Effect hook，Effect hook的第一个参数可以return一个函数，这样就可以在组件销毁的时候触发它：比如：此代码为笔者盲敲的，如果有bug请在下方评论，笔者会紧急修复。组件渲染的时候弹出的alert是正常的，笔者会在再下方说出解决方案import...

笔者是众多React开发者之一，编写react已有不少时日了，面试的时候遇到了很多自己不懂的东西，每次面试后都会把自己感觉蛮重要的内容总结下来，于是便有了此篇文章。希望此文章能够帮助到大家。React面试题正文：React是什么开发模式的框架？答案：React其实只属于V，视图请讲讲React的特点。答案：React的特定及缺点以及关键版本介绍请说出React的关键版本区别。答案...

每一项的input：<label> <input name="nex" type="checkbox" className={styles.visibleInput} checked={this.state.selectedIds.includes(obj.assetCardId)} onChange={() => {...

前景：今年四月份的时候面试了一家公司，技术面的时候被人家问到了CSS Module有了解过么，我说没有了解过，他就继续问到，那你在平时开发的时候给组件和元素起类名要怎么办呢？我说给元素和组件加指定前缀，这样就能够保证自己写的类名和其他同事写的类名不会起冲突。然后就没然后了，，后续又问了我很多React原理啥的面试就过了。今天我们就把CSS Modules是个啥子东西给他弄明白，这样会更...

最终的效果类似这样：作者是把非末级的选项给禁用了，如果你们需求是要不禁用求留意笔者渲染时的操作。接下来我们一起来做这个效果：笔者所用的是react + antd，用其他的架构也是类似，请自行举一反三：一：首先要处理从后端拿到的数据：处理成类似这种结构：上面数据的关键点笔者已经指出来了，我们来渲染树状选择框就是要根据以上关键点递归渲染。根据数据递归渲染选择框：import Re...

如果你的项目是dvajs脚手架创建的，那么更改port与host就要在package.json里面去更改，如下图：上图是改变host，如果是改port的话就是set PORT=3000&&roadhog如果你是纯react项目的话：在scripts文件夹下的start.js文件中更改...

浅析React受控组件与非受控组件前言带着问题看文章非受控组件：受控组件：小总结前言如果您是一名React开发者，您应该了解在开发React项目的过程中，如果遇到了处理表单的数据的时候一般有俩种的选择方式，一种是选择受控组件，一种是选择非受控组件。那么我们该如何正确的选择使用它们呢？您可能已经看过很多文章说“不应该使用setState”，而文档又声称“ refs不好” ……这在马克思主义基本...

文章目录父组件如何获得子组件的Ref笔者给大家提供俩种方法：一：使用React.forwardRef二：在子组件初始化的时候将ref通过事件传递给父组件父组件如何获得子组件的Ref在我们实际开发的过程当中难免会遇到父组件想要获得子组件的ref进行一些操作的时候，那么我们怎么做呢？笔者给大家提供俩种方法：一：使用React.forwardRef这是react官方文档中给我们说明的，我们照着...

在我们开发react或者vue项目的时候会发现当切换路由进行页面跳转的时候如果在前一个页面将滚动条滚到了最下面然后进行跳转那么接下来的那个页面也会默认滚动在最下面。这个时候我们就需要处理一下。在处理之前我们首先需要知道原因在哪里：原因是因为虚拟dom的算法问题，导致不会更新scroll解决方法：在你的外层框架监听history.location.pathname的变化，只要变了那就将b...

原因是因为你没有把你的Router放在最外面，withRouter不可以放在Router的外面。比如【下方是错误的】：在下面的代码中如果你在BasicLayout组件中使用withRouter就会报错：You should not use <withRouter(BasicLayout) /> outside a <Router>原因是因为你将BasicLayo...

笔者的项目背景：react+antd+less+babel-plugin-import(按需加载)+其他与本博客不相干的插件笔者的操作步骤：首先进行了降级react-scriptsnpm uninstall react-scriptsnpm i [email protected] -S然后进行npm run eject暴露配置文件在config的生产环境和开发环境配置less...

网上很多安装react-devtools的教程都已经过时了，其实大家完全不需要看那些教程，看笔者的教程也不是非常有必要，但是笔者会交给你方法，并附带安装步骤：第一步，找到facebook的react-devtools地址进行下载【要关联远程，建议复制地址进行clone】:react-devtools地址：https://github.com/facebook/react-devtools复...

在React中与之前写html阻止默认行为是有些不一样的，如果是写html我们还可以使用 return false 的方法阻止浏览器的默认行为，但是在react中则行不通，在React中必须使用preventDefault。例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：<a href="#" onclick="console.log('点击链接'); return...

笔者之前在项目开发的过程中遇到过这种问题，就是当我触发某事件再次获取数据，使用this.setState去更改数据，可是页面没有变化，但是数据确实是已经改了的，笔者特意在this.setState的回调函数里面输出确认了一下。后来又仔细的看了看，是因为重新获取回来的数据id有重复的，所以react就认为是有问题的，就不会给重新渲染页面，解决办法就是把你要获取的数据的id重新命名一下，或者说过滤数...

今天给大家带来React自定义input的样式，以及保留input的功能React实现：实现原理：给input加ref，然后在你自定义样式的标签上面加点击事件，触发input的点击事件。或者用label，都可以的。如果用label实现请看：改变input样式import React, { Component, Fragment } from 'react';import { mess...

React里面也有与Vue里面的v-html类似的东西，就是dangerouslySetInnerHTML。dangerouslySetInnerHTML的作用：它是React为浏览器DOM提供的innerHTML的替换方案。通常来讲，使用代码直接设置HTML存在风险，因为很容易无意中使用用户暴露于跨站脚本（XSS）的攻击。因此，你可以直接在React中设置HTML，但当你想设置dang...

this.setState是react类组件中最常用的一个react API，使用它可以改变state从而改变页面。比如：import React, { Component } from react;export default class Test extends Component { constructor() { super() this.state = { co...

如果你项目当中用的是react全家桶，react + react-router + redux + axios + antd类似这样的组合的话那么做路由的话就是react-router，首先要配置路由，关于react-router路由配置请看：https://blog.csdn.net/weixin_43606158/article/details/90239415而后可通过 this.p...

给元素或者组件设置自定义属性一般以‘data-’开头，后面的可以取个独特的名字，比如说我想给img表情加一个自定义的id属性，那么react可以写成如下的样式：<div> <div onClick={(event) => { alert(`图片的自定义data-id${event.target.parentElement.children[1].getAttrib...

在react开发过程中，有时会碰到一些需求需要我们去操控dom，那么我们就可以给组件挂载一个ref属性，然后就可以通过ref调用这个组件的方法或者属性之类的。接下来我们就来看看函数组件和类组件都是如何去挂载创建ref和使用它的：函数式组件(Hook)：// 首先引入React及useRefimport React, { useRef } from 'react;function Con...

今天给大家带来react+antd项目实战：项目需求：左侧sidebar与整体分开滚动左侧sidebar的二级菜单是在sidebar的右侧显示严格要求二级菜单距离一次菜单的距离左侧sidebar可收起展开sidebar收起展开的时候有0.3秒的动漫效果二级菜单的箭头始终指着一级菜单我们看到这个需求脑子里面就会去想用什么技术去解决它：1. 左侧sidebar与主体分别有各自的...

实际项目中大家经常会引入antd进行项目开发，对于如何更改antd组件的样式应该也是很多朋友都关心的，笔者今天就给大家分享一下笔者知道的方法：一：用CSS覆盖掉antd原有的样式：这是更改tooltip的方法，在控制台找到tooltip的类名，然后在对应的css部分更改它的样式。tooltip的left与top的值如果你想要更改的话是要加权重的在left与top后面加上!important，...

Effect Hook概念性内容介绍：Effect Hook可以让你在函数组件中执行副作用操作。PS：副作用操作包括：数据获取设置定义手动更改React组件中的DOM。。。Effect Hook可以把它当作是componentDidMount,componentDidUpdate和componentWillUnmount这三个生命周期的组合。（组件渲染，更新，销毁）在组件内...

首先通过npm || cnpm || yarn等方式在项目目录安装antd 和 babel-plugin-import。babel-plugin-import是用来按需加载antd的脚本和样式的。$ npm install antd babel-plugin-import -S编辑 .webpackrc文件，使 babel-plugin-import 插件生效。"extraBabelPl...

首先我们要安装dva-cli$ npm install dva-cli -g$ dva -v如果dva-v后出现了版本号说明已经安装dva的脚手架已经成功了。而后我们就可以使用dva-cli来快速生成dvaJS项目结构了在命令行dva new yourProjectName而后当它问你Do you insist on using dva-cli?(y/N)的时候输入 y，回车 就...

首先我们要知道单页面应用为什么要有router。其实简单讲就一句话：为了不进行后端路由，只进行前端路由BrowserRouter --浏览器路由(属于后端路由)HasRouter --前端has路由（属于前端路由）如何使用react-router？一个单页应用一般只需要一个顶层的Router组件即可，不要再在应用内加Router组件。比如我们现在顶层的组件是APP.js那...

在.webpackrc或者.webpackrc.js文件里添加disableCSSModules: true,我们写一个less文件并且用上less的语法看看我们配置成功了没有。现在我们已经发现我们已经配置成功了，可以happy的写less语法了！...

react更新到16.8版本后最主要的内容就是增加了hook这个特性，它的主要作用可以理解为对react的函数组件进行了一次升级，使react的函数组件拥有了和react类组件一样的功能（关于以前版本react的组件的介绍可以移步到这里观看：react创建组件的几种方法，以及区别）。Hook是什么：Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。...

首先我们要知道Redux是什么Redux是JavaScript的状态容器，它提供了可预测的状态管理。Redux可以运行在不同的环境下，不论是客户端、服务器端，还是原生应用都可以运行Redux。注意，Redux和React之间没有什么特别的关系，不要因为它们都是Re开头你就以为它们是有什么关联关系。不管你使用什么框架，Redux都可以作为一个状态管理器应用到这些框架上。Redux的动机当前端开...

虚拟DOM的机制：在浏览器端用JavaScript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环(Event L...

React的框架实现可以分为俩个部分一部分叫做reconciliation(调和)，另一部分为Rendering(渲染)。通过这俩部分，React用当下越来越廉价的计算成本去替代多余并且昂贵的DOM操作来提升整个web app的性能。Reconciliation(调和)  我们知道每个React component都有自己的render方法，组件通过每次render方法返回的值（Virt...