![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 94
追逐、
这个作者很懒,什么都没留下…
展开
-
Hooks编程扫盲(一)-- useSWR
一、背景Vue 3.0已经出到3.0.5了,React Hooks大家也用的如日中天。整天大家都在讨论Hooks,Hooks,那么Hooks式的编程到底有什么好处?参加本人的这篇文章。二、使用项目ReactVue包名swrvue-swr仓库地址github-swrgithub-vue-swr二、useSWR随着React Hooks的浪潮,各种基于Hooks 的方案越来越多,其中主要包含 状态管理、数据请求、通用功能的封装 等等。而 数据请求 是日常业务开原创 2021-01-23 16:08:40 · 4624 阅读 · 0 评论 -
我为什么要使用Hooks?
一、背景Vue 3.0已经出到3.0.5了,React Hooks大家也用的如日中天。整天大家都在讨论Hooks,Hooks,那么Hooks式的编程到底有什么好处?还记得当时Vue3.0 beta版本发布的时候,社区多少的反对声音:意大利面代码结构吐槽:“太失望了。杂七杂八一堆丢在 setup 里,我还不如直接用 react”我的天,3.0 这么搞的话,代码结构不清晰,语义不明确,无异于把 vue 自身优点都扔了怎么感觉代码结构上没有 2.0 清晰了呢 这要是代码量上去了是不是不好维护啊原创 2021-01-23 16:07:21 · 2294 阅读 · 1 评论 -
react-router-dom 的 hash-router 也就那么回事儿
一、要实现的功能我们使用React开发项目的时候,基本上是单页面应用,也就离不开路由。路由看似神秘,当我们简单的模拟一下它的核心功能后,发现也就这么回事儿。本文就详细的介绍一下react-router-dom 的 HashRouter的核心实现逻辑。本文主要实现的功能主要包含:HashRouterRouteLinkMenuLinkSwitchRedirect二、 实现的逻辑先不说代码是怎样写的,先上图,让大家看一下这个HashRouter到底是个什么东东:好吧,肯定有人会说这些圈转载 2020-11-20 11:45:16 · 1430 阅读 · 0 评论 -
React PureComponent 对于函数式Props传递的缺陷
一、问题产生项目中为了改进效率,大量采用PureComponent代替原先的Component,来避免跟组件的重新渲染,带动所有子节点数的重新渲染。对于PureComponent来说,我们清楚的知道他只是在原有的Component基础上,通过shallowEqual浅比较,为我们提供了一层shouldComponentUpdate的判断。来避免我们在props和state不变的情况下,重复调用render函数,导致性能下降。大部分的改进很顺利,只需要提取浅层的props传递即可。但是对于有函数式的prop原创 2020-08-09 10:20:21 · 1407 阅读 · 0 评论 -
React 高阶组件应用(一) 改善 antd Table组件的渲染效率
一、前言对于react 高阶组件。大家基本只知道定义和用法,在实际开发中,使用的可能并不多。项目组下来一个任务,重写某个由Antd Table渲染为主要功能的模块,这里发现一些问题,Antd Table在渲染时,即使没有改变Table的props,只是改变包裹Table的组件,Table组件也会重新渲染。二、问题产生import { Table} from 'antd';class TestRoot extends Component { change() { this.setState(原创 2020-07-22 18:04:04 · 3905 阅读 · 0 评论 -
React 对比 VUE 断舍离分(二)
React 对比 VUE 断舍离分(二)前言七、状态管理a) vue中的vuexb) react 中的 redux九、其他细节1、 this指向问题a) vue this指向唯一b) react 将this的指向交给了开发者维护2、 判断组件是否渲染的方式a) vue 提供了v-if操作符 配合计算属性b)react 大量的三元表达式未完待续前言上一期讲述了React和Vue 在 六大方面的对比。这一期将继续上一期的话题。七、状态管理在状态管理方面,虽然vue跟react采用的不同的框架,但是本原创 2020-06-01 17:55:38 · 236 阅读 · 0 评论 -
redux 和 react-redux --报告二营长,敌人又来啦!
背景一开始接触redux时对于它的数据state和react本身的数据state还有点容易打结(它们是完全不同的两个东西,后面会讲到)现在搞清楚一点了,来小结一下。在此之前,还是先讲一下redux是干嘛的,也就是说它是解决什么需求的,这里举一个小例子。先来看看React里面的数据是怎样传递的(下图中并不是说this.state只能在“团长”处,这里只是为了简便,所以才这样写,其实营长,连长都可以有自己的this.state):可以看到,一般都是团长等高级干部商量好对策之后(this.state转载 2020-06-01 15:59:29 · 295 阅读 · 0 评论 -
React 对比 VUE 断舍离分(一)
前言初入大厂,果然不可避免的遇到react。经过各种犹豫,彷徨,踌躇,还是无奈接受了他。本篇文章主要介绍一个从vue技术栈转型react的百种愁千种恨,做一个VUE 跟 React的全面对比。相同点:两者大部分主要功能是相同的, 如下:虚拟DOM, 快速修改DOM组件化开发响应式组件服务端渲染应用开发全家桶: 路由 + 状态管理 + 打包等不同点:1、dom编写vue采用模板语法,react采用JSX来编写DOM, 模板语法是在HTML中加入一些赋值markup,而JSX语法是将J原创 2020-05-30 17:44:06 · 412 阅读 · 2 评论 -
从零开始使用webpack(4.x)+bable+react+ant-design配置单页面应用开发环境(附模板)
从零开始使用webpack+react+antd搭建web项目(附模板)前言准备工作1 建立项目目录2 安装webpack3 准备项目文件结构二 配置webpack的工作1 基础配置2 配置webpack-dev-server三 使用React开发页面四 使用Webpack、Babel和React开发页面1 生成我们的html功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图......原创 2019-02-22 18:08:59 · 1031 阅读 · 0 评论