React
谛听
做一名优秀的前端汪
展开
-
不可不知的react模糊搜索与结果高亮
前言随着vue、react等框架等广泛使用,前端对数据处理的需求越来越多,处理的数据量也越来越大。今天我就接到这么一个需求,为了减少对后端的请求次数,提高性能,前端实现对数据进行轻量的模糊搜索与检索结果的高亮显示。talk is cheap,show me code,咱们闲话少说,直接看demo代码(这里我们使用模糊检索antd中的icon图标做demo演示):如下是App.tsx文件内容:// App.tsximport React, { useState } from 'react';impo原创 2020-06-15 21:06:53 · 1561 阅读 · 0 评论 -
名符其实的react下一代状态管理器hox
前言自从React16版本发布Hooks以来,大家纷纷上车尝鲜。毫无疑问,Hooks在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但Hooks在数据状态的共享方法略有不足,虽然可以使用useReducer实现数据状态管理,但在一定程度上是对redux的思想的复用。我们知道redux、Flux、dva等这些React状态管理的工具,实际上都是对action、dispatch、reducer、useStore、Provider、Context这些概念的排列组合,概念太多,学原创 2020-05-29 14:44:43 · 1249 阅读 · 0 评论 -
import按需加载react类组件时引发的bug
问题描述由于项目工程特别大,使用了import函数与@loadable/component结合进行组件的动态加载,从而实现Code Splitting的效果。如下是一个测试组件的代码:// 这是一个组件import React from 'react';interface Props {};export default class Demo extends React.Component<Props> { render () { return (原创 2020-05-27 15:15:41 · 961 阅读 · 0 评论 -
React开发踩坑总结(持续更新)
this迷失由于React开发的灵活性,在组件属性传递时,操作函数也常常作为属性被传递进去。由于未使用使用箭头函数造成函数在执行是根据上下文确定this指针的值,常常造成this is undefined的问题。import React, { Component } from 'react';export default Button extends Component { handle...原创 2020-03-04 14:02:55 · 965 阅读 · 0 评论