清颖的博客

做运营系统、后台系统、ToB项目时避免不了需要研发表单，要填写各种内容。操作：给`Form.Item`的属性`rules`，给`rules`里面指定了 *{ required: true }*, 同时给了 `validator`自定义校验方法。问题描述：自定义校验后，required 必填不起效。解决……

在地图上面写多个小图标，图标位于地图两侧并且都可以点击。要求点击图标时不触发地图的点击事件。如果使用Taro的Map组件开发地图，什么都不处理的情况下，点击小图标时，地图也会被触发点击事件。这不是我们的预期结果。解决方法：pointer-events: visible;

问题背景：使用Taro 提供的组件库 VirtualList 时，数据源长度改变后，发生渲染抖动。读完本篇文章，你可以获得：虚拟列表概念虚拟列表的使用场景性能优化策略-key虚拟列表渲染抖动的问题解决表格抖动或渲染错误的解决方向

有一个列表，是循环遍历出来的，我们要做的是：点击某个子项时，只有该子项的展开或收起状态会受到影响，而其他子项的状态不会改变。（同情景的，做小图标高亮时也可以用到，达到只有该项图标高亮的效果）如上，在点击事件中传入Id（或其他代表唯一的属性），改变当前项的数据并返回，而其他项原样返回。可以使用组件的状态来追踪每个子项的展开或收起状态，通过。无论用的什么前端框架都可以使用该思路，属于JS思想。这样的属性去判断，然后返回子项数据。

回顾本次求职面经，呕心沥血整理，无偿分享面试题。找到工作的正确打开方式是：先投小公司或不想去的公司；回顾一下面试题，总结知识点；优化简历，再投自己希望去的，继续总结面试题，复盘（这点非常重要！！！）一面：一般都是八股文，年轻的面试官经验少，他们全都大炮轰击问不停（阿里、飞猪、米哈游），有的感觉是走过场，反正阿里基本都有算法笔试，可能他们问个基础后面留给二面去筛了；有资深的会问的比较有水平，一步一步问，然后扒原理……

① 函数式组件不需要继承，直接 “function+组件名” 就可以了；而class组件还需要继承 `class DemoClass extends React.Component() `② 函数式组件没有 this 指向的问题，方法定义后直接调用；而class 组件中有this，要考虑 this 指向，事件还需要 bind 绑定③ 函数式组件写法简单，无生命周期函数，直接用 useEffect 控制执行时机；而 class 需要一系列的生命周期函数控制，

这里以简单的语言描述一下useReducer的使用。使用场景：当一个state需要维护多个数据且它们之间互相依赖。这样业务代码中只需要通过dispatch来更新state，繁杂的逻辑都在reducer函数中了。分别介绍一下各个参数、方法。

如果你在useEffect函数中使用了async，运行后会出现该报错：“Uncaught TypeError: destroy is not a function”，下面为您分析原理并解决。

防抖不起作用的原因：useEffect 会在每轮渲染结束后执行，在state发生改变时，也会重新执行。解决：这里要使用ref保存防抖函数，防止触发efect函数时被重新生成。本文还可以学习到如何自定义hooks。......

useContext的意义：接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 Provider 的 props值决定。

背景：使用React的antd组件的Upload（官网），要求文件上传后，在点击提交时再将文件传过去。技术点：完全控制的文件上传。可控制上传数量。控制文件格式。移除时的事件onRemove。状态、数量改变onChange事件等。是否带cookie，withCredentials: true。提交时，originFileObj属性获取原始文件。

在React中要实现父组件对子组件的方法调用，离不开对React.forwardRef与useImperativeHandle的理解。1、React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。React.forwardRef 接受一个渲染函数（可理解为一个组件）作为参数。这个函数的参数是props和ref，返回 React 节点。

文章目录不能更改状态？错误示范：更改状态后，Switch以下的其他组件也被重置，错误示范：正确代码：用Switch时，怎么都改不了状态；要么就是切换页面时，再回本页，选择的值不见了；还有，切换Switch时，怎么把其他表单项给重置了呢？重点：使用setFieldsValue更改取值；使用defaultChecked确定默认值。看下错误代码，你是否犯过该类问题呢？如果有其他问题，欢迎评论区留言，一起讨论。不能更改状态？错误示范：this.state={ show:false}<Form.

在其他组件中操作该组件，我们通常可以用ref.current获取实例，进而调用方法或属性实现。那么我们就可以给 Form 创建一个ref:hooks中： const formRef = React.useRef();类组件中：constructor(props){ super(props); this.formRef=React.createRef();}然后，就可以使用ref了，Modal的footer 中： [<Button key="save"

在Upload组件中经常用的就是受控的显示和上传。我经常遇到的是这种情况：完全受控组件。这样一定要记得：设置fileList属性。它决定了文件列表默认显示什么，以及上传后显示什么！onChange方法的其中两个重要且常用的参数：file、fileList。参数解释如下：file：当前操作的文件对象。{ uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png' // 文件名 status: 'don

1.Modal弹窗销毁后再打开，原来的值仍存在，如何销毁弹窗内容？2. 关于Select下拉组件。

一、Formik的概念与理解Formik是一个小型库。由React组件和hooks组成，它内置了表单的state管理操作，同时使用了Context，能够让表单组件多层嵌套，不再需要一层层传递。它也可以便捷实现自定义校验！安装：npm install formik --save 或 yarn add formik（一）官方案例初步写法：主要属性：initialValues（必须，否则会出现错误），validate，onSubmit，onChange等。

React中的数据传递是自上而下的（从父组件传给子组件），通过props逐层传递。但是这样层数多了，会极其繁琐。因此，就提到了Context上下文共享数据，这种方法不需要显式的通过props传递。Context：为了给某个组件共享全局数据。例如：网站当前登陆用户、主题、首选语言等。......

之前用过HOC高阶组件，还不了解render props，刚刚进行了了解学习，收录分享之。本文暂做记录，往后抽时间会更新。一、官方文档：react 的 Props renderHOC高阶组件二、收录文章：[ 简书].React组件Render Props VS HOC 设计模式：https://www.jianshu.com/p/ff6b3008820a[ 知乎].HoC 与 Render Props：https://zhuanlan.zhihu.com/p/62791765

前言：近期，博主在面试呢，这一周面试约的满满的。本篇整理一下看过的资料及其链接，方便回顾、查阅。建议收藏哦！文章目录一、前端知识点深入汇总，划重点！1. HTTP 跨域的10种解决方案2. HTTP 相关面试题3. Chrome 浏览器的渲染原理4. 数组常用的操作方法5.是否改变原数组方法总结6.JS的三个方法：splice,slice,split7. JS精选文章汇总8. JS的继承方式有哪些（一般是6种）附. 牛客网的面试题汇总二、刚转站到掘金写文章，请多多支持！一、前端知识点深入汇总，划重点！

问题描述：在React开发中，使用了ant design的Table组件，报错信息：Uncaught TypeError: rawData.some is not a function at Table.js:101代码截图：问题分析及解决：官方要求dataSource应为数组，这里取值是后台返回的data，我们要分析的就是这个data，若data中还有其他内容，例如：{ data：{ sum:100, list:[{ userId:1,name:'qingying',age:

在 React.js 开发中，函数组件(function component) 和 类组件(class component) 的差异分析。深入理解类组件的this指向变更问题。从原理上解析react中为何会遇到获取到旧的props、state的现象。

React中的componentWillReceiveProps 的升级版本是： static getDerivedStateFromProps。getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

JSX是JavaScript的语法扩展，看起来很像XML。JSX因React框架而流行，它们是 React 组件。JSX原理：每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。三个参数分别指：组件名、组件属性、组件内容使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。例1：如下JSX代码：<MyButton color="blue"> Click Me</MyBu

VS Code代码块的快速提示插件：只需要敲前面的提示字母就可以自动生成代码块，提高编程效率。ES7语法标准，适合React、Redux、React Native 等编程者使用。imple extensions for React, Redux and Graphql in JS/TS with ES7 syntaxReload Required.

React中封装Modal组件为子组件，可多次复用。子组件的Modal是否显示，取决于父组件的props。涵盖知识点：state由父组件传入、组件的封装、antd中Modal组件的应用。

antd组件库与TypeScript开发总结之问题解决一：Form表单报错。最近常使用react的脚手架ant design pro开发项目，画页面时主要用了antd组件库，常遇到些问题，分享一下解决方法。

select下拉列表组件常用事件属性的说明，使用ant design与React开发的同学可以参考，ant design pro构建页面时有用到。

antd的Form中弃用了getFieldProps，改为了getFieldDecorator，现在记录一下相关的用法。getFieldDecorator用于数据的交互反馈，主要应用在表单中。

React中组件的属性传递机制，由父组件传递给子组件，不能跨级传递。当有多个组件嵌套时，从最外层的祖先组件的props开始，依次向其后代组件传递props。