react
文章平均质量分 65
baoleilei6
微信号:bll1286971588 欢迎交友
展开
-
在react函数式组件中使用防抖与节流函数
先来看一段代码:import debounce from 'lodash/debounce';export default class Search extends Component { constructor(props) { super(props) this.handleSearch = debounce(this.handleSearch, 500); } handleSubmit = (e) => { e.preve原创 2022-04-28 08:22:08 · 2209 阅读 · 0 评论 -
一句话解释 useCallback 与 useMemo 的区别 & 作用
背景最近在重构其他项目的代码,发现很多新手写的代码没有做好 hook 内存优化,在解释为什么需要以及 useCallback 和 useMemo 的区别,顺便写下来。解释一句话:useCallback 缓存钩子函数,useMemo 缓存返回值(计算结果)。type DependencyList = ReadonlyArray<any>;function useCallback<T extends (...args: any[]) => any>(callb转载 2022-04-27 22:14:08 · 1978 阅读 · 0 评论 -
React的memo和useMemo的作用
要想学习useMemo必须要先知道React.memo这两者都有一定的优化作用memo的作用当数据变化时,代码会重新执行一遍,但是子组件数据没有变化也会执行,这个时候可以使用memo将子组件封装起来,让子组件的数据只在发生改变时才会执行案例点击按钮改变n的值,m不变,验证程序会不会执行m的代码不使用memo的情况只改变n的值时,虽然说m的值没变,但是也执行了Child的打印语句function App(){ const [n,setN] = useState(0);转载 2022-04-27 22:12:50 · 984 阅读 · 0 评论 -
redux redux-actions使用
redux-actions有两大法宝createAction和handleActions.createAction原来创建action:const startAction = () => ({ type: START });使用redux-actions创建action:import { createAction } from 'redux-action...转载 2020-02-04 11:40:18 · 1484 阅读 · 0 评论 -
使用 getDerivedStateFromProps 派生状态
使用 getDerivedStateFromProps 派生状态时,不需要把组件自身的状态也设置进去class AAA extends React.Component { // 必须给 state 设置一个值,哪怕是一个空对象 state = { num:666 }; static getDerivedStateFromProps(nextProps, prevStat...转载 2020-02-03 17:01:59 · 639 阅读 · 0 评论 -
react进阶之异常处理机制-error Boundaries
该文章包含以下内容:1.Error Boundaries介绍2.ComponentDidCatch 函数的参数3.触发error boundaries后程序要走向哪里?4.对于不能捕获的错误的新处理方式5.在堆中跟踪component6.try/catch 如何?7.Event Handlers怎么样?8.React 15后的函数命名改变...转载 2019-12-25 09:52:08 · 526 阅读 · 0 评论 -
React - getSnapshotBeforeUpdate() 的使用
getSnapshotBeforeUpdate() 方法1:在render之前调用,state已更新2:典型场景:获取render之前的dom状态我们来看一个例子,每一秒钟都会加入一个新的<div>msg : number</div>假如我们使用滑轮移到某个地方,内容物会随着时间不断下降,因为新生成的div会把它挤下来,如何保持不动了?<sc...转载 2019-09-24 11:12:03 · 4426 阅读 · 0 评论 -
react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?
三者用途稍有不同,按依赖关系调整下顺序:1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选:var Hello = React.createClass({ render: function() { return <div>Hel...原创 2019-09-24 11:03:39 · 616 阅读 · 0 评论 -
React.memo例子
1.React.memo是一个高阶组件,类似于React.PureComponent,不同于React.memo是function组件,React.PureComponent是class组件。2.这种方式依然是一种对象的浅比较,有复杂对象时无法render。3.在React.memo中可以自定义其比较方法的实现(可选参数)。//MyComponent.jsimport Re...转载 2019-09-24 10:32:47 · 515 阅读 · 0 评论 -
redux状态管理和react-redux的结合使用
原文: https://www.cnblogs.com/kelly2017/p/8034251.html一:调试注意:Redux调试工具。谷歌中搜redux同理react新建store的时候判断window.devToolsExtension使用compose(组合函数)结合thunk插件和window.devToolsExtens二:ReduxRedux 是 Jav...转载 2018-11-21 16:19:38 · 712 阅读 · 0 评论 -
React——第三阶段(1)(高阶组件、context)
根据胡子大哈的文章学习,感谢大胡分享胡子大哈-高阶组件、context高阶组件什么是高阶组件高阶组件就是一个函数,传给他一个组件,他返回一个新的组件。这个新组件会使用传入的组件作为其子组件。高阶组件体现的是——设计核心思想:抽象具有相同需求逻辑的组件,用函数处理例子:可能有很多组件有这样需求:“在组件挂载阶段,从LocalStorage加载某字段”定义高阶组件src/C...转载 2018-12-11 17:37:41 · 376 阅读 · 0 评论 -
React context基本用法
React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递。React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的context。1.老版本的contextgetChildContext 根组件中声明,一个函数,返回一个对象,就是contextchildContextTypes 根组件中声明,指定co...转载 2019-01-03 19:49:52 · 1576 阅读 · 0 评论 -
200行代码实现简版react
现在(2018年)react在前端开发领域已经越来越转载 2019-03-13 22:11:41 · 494 阅读 · 0 评论 -
React Router页面传值的三种方法
本文主要介绍React Router定义路由之后如何传值,有关React和React Router的基础请参考阮老师的博客注:本文示例React Router版本为:3.0.2,使用前请注意检查版本1一.props.params官方例子使用React router定义路由时,我们可以给<Route>指定一个path,然后指定通配符可以携带参数到指定的path:首先定义...转载 2019-03-19 08:51:52 · 11671 阅读 · 3 评论 -
Redux:Middleware你咋就这么难
这段时间都在学习Redux,感觉对我来说初学难度很大,中文官方文档读了好多遍才大概有点入门的感觉,小小地总结一下,首先可以看一下Redux的基本流程: 从上面的图可以看出,简单来说,单一的state是存储在store中,当要对state进行更新的时候,首先要发起一个action(通过dispatch函数),action的作用就是相当于一个消息通知,用来描述发生了什么(比如:增加...转载 2019-03-28 18:12:11 · 345 阅读 · 0 评论 -
fiber 架构的本质
直白的描述,啥是 fiber唔,大家好久不贱……最近在研究 fiber,然后终于研究的差不多啦,就发篇文章在文章开始之前,需要了解两个前置知识:链表什么是链表,和传统的树有啥不同 其实最大的不同在于,就是链表上的没一个节点,都能知道自己的父节点,兄弟节点,子节点,这点在传统的树的递归中是没办法知道的requestIdeCallback这个 API 也是关键,简单说就是它接收的回...转载 2019-08-23 18:42:10 · 843 阅读 · 0 评论 -
React进阶之高阶组件
前言本文代码浅显易懂,思想深入实用。此属于react进阶用法,如果你还不了解react,建议从文档开始看起。我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react组件,并返回一个新的组件.A higher-order component is a function that takes a component and returns a new ...转载 2019-08-13 10:36:52 · 257 阅读 · 0 评论 -
为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白。代码如下:class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessar...转载 2018-11-14 08:43:21 · 611 阅读 · 0 评论