![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
huangpb0624
这个作者很懒,什么都没留下…
展开
-
css in js开发利器 - styled-components(样式组件)
styled-components是一个常见的 css in js 类库,和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力,比如变量、循环、函数等。注意:有时候 React 版本和 styled-components 版本不匹配时使用 styled-components 会有 hook 报错,要升级一下 React 版本。一、安装npm install --save styled-components二、使用文档1. 基本使用import styled.原创 2020-06-27 23:46:45 · 1069 阅读 · 0 评论 -
React Context
前言Context被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有。在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context。The vast majority of applications do not need to use content.If yo...转载 2018-11-11 11:54:36 · 659 阅读 · 0 评论 -
React构造函数中为什么要写 super(props)
为什么 super() 要放在构造函数 contructor 最上面执行 ?ES6 语法中,super 指代父类的构造函数,React 里面就是指代 React.Component 的构造函数。在你调用 super() 之前,你无法在构造函数中使用 this,JS 不允许这么做。为什么要不允许呢?看一下下面这个例子:class Person { constructor(nam...原创 2018-12-14 21:25:59 · 6426 阅读 · 1 评论 -
React 虚拟 DOM 实现原理
React虚拟DOM机制虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时,记录新树和旧树的差异 最后把差异更新到真正的dom中React引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。 基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DO...原创 2018-12-10 22:57:39 · 2526 阅读 · 1 评论 -
dva值得一试
前言使用React技术栈管理大型复杂的应用往往要使用Redux来管理应用的状态,然而随着深度使用,Redux也暴露出了一些问题。如编写页面配套(action、reducer)过于繁琐、复杂,组件之间耦合较深、不够扁平化、调用action creator发起动作破坏action纯洁性且必须层层传递等。这些缺点迫使使用Redux的人开始探索好的架构方式,解决或减轻使用Redux的问题。业界标杆阿里...转载 2018-12-27 22:19:02 · 472 阅读 · 0 评论 -
React PureComponent 浅比较详解
为什么用PureComponent?PureComponent是优化React应用程序最重要的方法之一,易于实施,只要把继承类从Component换成PureComponent即可,可以减少不必要的render操作的次数,从而提高性能,而且可以少写shouldComponentUpdate函数,节省了点代码。原理当组件更新时,如果组件的props和s...转载 2019-03-04 23:34:30 · 2708 阅读 · 0 评论 -
详解 React ref 属性
1. ref 用在class组件上是对组件实例的引用,用在dom元素上是对该元素真实dom节点的引用,得到引用以后就可以调用组件内定义的函数或操作dom节点(不能在函数式组件上使用 ref 属性,因为它们没有实例)。2. 可以通过 ReactDOM.findDOMNode(ref) 来获取组件或dom元素挂载后真实的dom节点(对于dom元素上使用ref的情况,ref本身引用的就是该元素真实的...原创 2019-03-10 12:10:15 · 6263 阅读 · 0 评论 -
React16.x 源码分析
一、组件实现源码分析1.https://github.com/amandakelake/blog/issues/27二、setState源码分析1.https://github.com/amandakelake/blog/issues/29三、Fiber 架构1.https://www.jianshu.com/p/bf824722b496...原创 2019-05-14 09:24:43 · 1443 阅读 · 0 评论 -
webpack配置react-hot-loader热加载局部更新
有人会问 webpack-dev-server 已经是热加载了,能做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢?其实这两者的更新是有区别的,webpack-dev-server 的热加载是开发人员修改了代码,代码经过打包,重新刷新了整个页面。而react-hot-loader 不会刷新整个页面,它只替换了修改的代码,做到了...原创 2017-11-16 23:41:05 · 19347 阅读 · 7 评论 -
JavaScript响应式原理(React,Vue,Ng)
转载 2018-10-27 23:53:24 · 2996 阅读 · 0 评论 -
React 中的 key 为何物?
数组和迭代器循环出的 DOM 元素要设置唯一的,固定不变的 key 值。设置了 key 以后,页面更新时,React 会根据这个 key,只更新或重新渲染更改的组件,没有更改的组件则直接移动,而不是将它们从 DOM Tree 中移除然后再将它们重新创建,实现了复用,提高了渲染效率。Key 是 React 识别 DOM 元素的唯一标识,不真实存在,也不能被 Props 读取。React 根据...原创 2018-10-21 22:31:04 · 471 阅读 · 0 评论 -
React 的加载 loading 库——react-loadable
背景当你的项目足够大时,把所有代码打包到一个bundle中的启动时间就会成为问题。这时就需要把app拆分为若干个bundle,然后根据需求动态加载它们。一个大bundle VS 若干个小bundle那如何把一个bundle拆成几个呢?这个问题其实已经被 Browserify 和 Webpack 这些工具解决得很好了。但还要做的是在项目中找到合适的地方拆分bundle,然后异步去加载。所以当项目中有...转载 2018-03-21 17:10:06 · 12965 阅读 · 0 评论 -
Redux 入门教程(一):基本用法
转载自:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.htmlReact 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。代码结构组件之间的通信对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 React 没法写大型应用。为了解决这个问题,201...转载 2018-07-04 22:44:59 · 162 阅读 · 0 评论 -
Redux 入门教程(二):中间件与异步操作
转载自:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html上一篇文章,我介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染。但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后,Reducer 立即算出...转载 2018-07-04 22:48:20 · 144 阅读 · 0 评论 -
Redux 入门教程(三):React-Redux 的用法
转载自:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html前两篇教程介绍了 Redux 的基本用法和异步操作,今天是最后一部分,介绍如何在 React 项目中使用 Redux。为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux,本文主要介绍它。这个库...转载 2018-07-04 22:51:23 · 187 阅读 · 0 评论 -
React项目加载性能优化
一、了解页面加载过程1. 打开页面 这个时候页面是完全空白的。2. 首屏渲染 Html 和引用的 Css 加载完毕,浏览器进行首次渲染,有可见的内容出现。 我们把首次渲染需要加载的资源体积称为“首屏体积”。3. 首次内容渲染 react、 react-dom、业务代码加载完毕,应用第一次渲染,页面主要内容出现。4. 可交互 然后应...原创 2018-08-08 00:16:21 · 7281 阅读 · 0 评论 -
React从渲染原理到性能优化
很多人都使用过React,但是很少人能说出它内部的渲染原理。有人会说,会用就行了,知道渲染原理有必要么?其实渲染原理决定着性能优化的方法,只有在了解原理之后,才能完全理解为什么这样做可以优化性能。正所谓:知其然,然后知其所以然。本篇文章,将会分为四部分介绍:一、JSX 如何生成 element当我们写下一段JSX代码的时候,react是如何根据我们的JSX代码来生成虚拟DOM的组成元素...转载 2018-08-19 17:20:57 · 3920 阅读 · 0 评论 -
React 的弹框实现(类 Antd 的 append 到 body)
Modal, PopUP, Toast, ToolTip 等这些都属于弹框。平时我们使用弹框一般有两种方式:一种是通过函数形式弹出,另一种是组件形式弹框。下面我分别对两种弹出方式写了2个 Demo,如果有可以优化的地方,请多多指点。。。函数形式弹出// mask.jsimport React from 'react';import {Button} from 'antd';im...原创 2018-09-18 23:26:51 · 7118 阅读 · 4 评论 -
React 项目中使用 Echarts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法。 我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件导入到我们的html或者是jsp等文件里面,但是在react项目中,我们可以直接使用node....转载 2018-01-29 14:45:41 · 6966 阅读 · 0 评论