qq_35536883的博客

项目运行tnpm install 遇到报错信息为zlib: unexpected end of file可通过清除缓存解决，如下：// 执行以下命令，清除npm缓存npm cache clean --force

使用过React的小伙伴们，面试中经常会被问到SetState。各种角度来探测你对setState的理解，认知！有时候可能面试紧张到不知所云，有时候可能压根儿不知道面试官想考你什么，总体来说，还是对setState没有驾轻就熟、玩转自如的程度（本着从自身出发找问题的原则才会进步，毕竟。。。面试机会错过就很难补救了）结合面试问题，对setState做一个阐述～1.setState()之后发生了...

空格显示不正常这是因为浏览器显示机制，会将连续多个空格显示成1个空格。在这些示例中，HTML和JSX中的空格是一样的<div>Hello•World</div><div>•Hello•World</div><div>••Hello•World</div><div>•••Hello•World•••&lt...

基于webpack配置react开发环境之前只会用脚手架create-react-app来创建react项目，学习一下自己用webpack搭建react项目一、 初始化项目文件夹创建一个项目文件夹，在命令行工具中切到该文件夹目录下，执行npm init进行初始化。文件夹下生成了package.json文件。在文件夹下创建两个文件夹：dist，用于放置编译后的代码src， 用于放置开发...

好文收藏与推荐之React React 源码解析 从零搭建React全家桶框架教程 让虚拟DOM和DOM-diff不再成为你的绊脚石 《React源码解析》系列完结！

通常使用ant design的表单验证时，我们直接在getFieldDecorator中使用rules来定义校验规则，默认的触发校验规则则的事件validateTrigger为onChange，也就是说，触发onblur事件时不会校验其中的规则。 <FormItem {...formItemLayout} label="文章标题"> {getFieldDecorator('ti...

Hook是什么？Hook可以让你在不编写class的情况下使用state以及其他React特性。为什么使用hook？在组件之间复用状态逻辑很难：使用hook从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook使你在无需修改组件结构的情况下复用状态逻辑。（自定义Hook）复杂组件变得难以理解：每个生命周期常常包含一些不相关的逻辑。Hook将组件中相互关联的部分拆分成更小的函数（E...

最近在开发一个用react开发的微信H5页面。遇到了一个bug，就是当软键盘弹出再收起时，软键盘位置的点击事件失效。刚开始以为是onclick的锅，但是换成onTouchStart还是没有好。而且iphone7 Plus没问题，但是iphone7就可以复现这个bug。原因：在IOS下，点击页面中比较靠下的input时，软键盘弹出，页面会上移，document.body.scrollOffs...

h5的首页进度条有的会使用假的进度条，就是定时增加进度。实际上进度条的功能就是要在用户进入实际页面以前进行页面初始加载。由于h5的图片占比非常多，加载图片非常影响性能，所以我们在进度条的同时加载图片，并隐藏掉它们，这样在使用图片时直接去缓存中取就可以了。如下代码就是通过图片加载事件控制进度条百分比的hook代码useEffect(() => { // 获取id为imgs下的所有i...

项目中需要展示一个“创建中”的message全局提示，调用api，等待后台返回成功状态码后，移除“创建中”的message// 第二个参数是表示自动关闭的延时，单位秒。设为 0 时不自动关闭。const hide = message.loading('文件创建中...'， 0)；// 等待api请求成功后，执行关闭hide();...

Redux-thunk什么是thunk？thunk可以理解为函数的另一种称呼，但不是以前我们说的简单函数。Thunk代表的是一个被其他函数返回的函数。 function wrapper_function() { // this one is a "thunk" because it defers work for later: return function t...

使用公司里的脚手架搭建react项目，但是在使用antd组件时，会显示警告：JSX element type ‘RadioGroup’ is not a constructor function for JSX elements.查看了网上的一些解决方案，大概就是这两种：方案一在tsconfig.json中设置"allowSyntheticDefaultImports": true方案二...

支持lesscreate-react-app 2.+支持sass、css，但是不支持less。为了要应用基于less开发的AntDesign组件，我们需要使项目支持less。执行步骤我们首先执行以下代码来暴露webpack配置：yarn run eject如果产生报错This git repository has untracked files or uncommitted cha...

复制按钮，使用antd的<Icon type="copy" />，按钮<Icon type="copy" onClick={this.copy} />先绑定onClick事件，具体函数实现如下copy = () => { var copyDOM = document.getElementById("xxx"); //需要复制文字的节点 ...

最近公司里碰到需要使用redux解决公共状态的问题，查看了一下资料，来分享一下：什么时候需要Redux？当你遇到以下场景时，就可以引入redux了：某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态如何引入Redux？npm install redux --save简易使用Redux在项目文件下src中创建st...

map循环，报警告Expected to return a value in arrow function意思是缺少return返回值 解决方案：使用forEach代替map，因为ESlint报这个警告是因为map, filter , reduce 需要返回值也可以使用map,在react中用jsx的方式，直接把{}改成()...

Iconfont平台iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。如何引入React项目中1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...

React ReduxReact-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。细节参考React Redux官方英文文档安装npm install react-redux或yarn add react-reduxProvider<Provider / >全局使用...

最近项目中新增了一个功能：格式化及高亮展示JSON数据。查找发现了react-json-view，简直太方便了。react-json-view（RJV）是一个用于显示和编辑javascript数组和JSON对象的React组件。使用起来也很简单：// import the react-json-view component// 在需要的组件引入react-json-view组件impo...

能够或者需要创建多个store吗？Flux模式描述了一个app中拥有多个store，每个store中存储着某个方面的数据。这将会引发一些问题，类似一个store中的数据需要等待另一个store更新完成。在redux中就不需要这样，因为已经通过把单个reducer拆分成多个更小的reducer来实现。也存在一些情况，需要创建多个不同的redux store，但是理想模式是创建单个store。只拥...

yarn/npm run eject使用create-react-app 创建的项目默认不支持less，但比如说要用AntDesign，它是基于less的UI组件。create-react-app生成的项目文，看不到webpack相关的配置文件，需要先暴露出来，使用如下命令即可：yarn run eject这里我使用的是yarn，也可以使用npm报错使用该命令时，报错This git...