![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
养基赚钱
这个作者很懒,什么都没留下…
展开
-
react-进阶系列-实现react-redux的provider
实现react-redux的provider原创 2019-03-19 18:53:38 · 1859 阅读 · 0 评论 -
React的key
多个子组件的更新说明key的重要性第一种无key情况:更新前:<div> <Test text={'one'}/> <Test text={'two'}/></div>更新后:<div> <Test text={'one'}/> <Test text={'two'}/> <...原创 2019-07-23 21:44:30 · 124 阅读 · 0 评论 -
理解react的diff算法
关于React的diff算法React活着diff的核心目的,就是不管页面多大,DOM怎么变化,我都以最小(其实不是)的代价去更新DOM1 React并不是说比原生操作DOM更快,相反由于有diff反而会有性能损失diff性能损失为什么还要用?因为diff可以以最小的代价来更新DOM,如何最小代价更新了 ?内存中存有虚拟DOM即用对象来展示的DOM{ type:'...原创 2019-07-25 17:07:49 · 193 阅读 · 0 评论 -
React优化--函数式组件
react优化connect利用的是pureComponent,注意props的比较是浅比较函数式组件了解函数式组件缺点:1 没有this2 没有生命周期3 没有state因为没有生命周期,无法使用shouldComponet进行优化一旦父组件setState,那么子组件也要重新渲染函数组件缺点const Child = (props) =>...原创 2019-08-13 15:04:30 · 1080 阅读 · 0 评论 -
虚拟列表无限下拉组件
import * as React from 'react';import { debounce } from '@src/until/until';export default class Scrool extends React.Component<any, any> { constructor(props: any) { super(props); ...原创 2019-08-08 23:19:18 · 545 阅读 · 0 评论 -
React判断:函数组件还是类组件
React如何判断是函数组件还是类组件方法一: 通过instancOflass A {}class B extends A {}console.log(B.prototype instanceof A); // true而我们的类组件写法,是通过继承React.Component来,所以可以通过instanceOf来判断class Child extends React.Co...原创 2019-08-14 08:33:17 · 2283 阅读 · 0 评论 -
pureComponent
pureComponent通过对比props的改变,自动调用shouldComponent优点: 减少render优化性能缺点: props对比是浅比较,可能导致子组件该渲染的时候没有渲染shouldComponent的bugclass Father extends React.PureComponent{ handleClick = (list) =>...原创 2019-08-09 17:14:48 · 143 阅读 · 0 评论 -
ComponentWillMount不进行ajax请求原因
ComponentWillMount不进行ajax请求原因Fiber原因1、React16之后采用了Fiber架构,只有componentDidMount声明周期函数是确定被执行一次的,ComponentWillMount的生命周期钩子都有可能执行多次所以不加以在这些生命周期中做有副作用的操作,比如请求数据之类2、服务端渲染,ComponentWillMount会执行两次co...原创 2019-08-09 17:16:14 · 3958 阅读 · 2 评论 -
React--为什么需要绑定this
不绑定this的情况下,this指向丢失class Foo extends React.Component{ constructor( props ){ super( props ); } handleClick(event){ console.log(this); // 'this' is undefined } render(){...原创 2019-08-20 21:38:07 · 404 阅读 · 0 评论 -
myThunk和combineReduner
actionconst action = { type:'name/@fetch', payload:data}myThunkconst effects = modelx.getEffects()const myThunk = (store) => (next) => (action) => { let typeArr = actio...原创 2019-07-16 20:45:47 · 79 阅读 · 0 评论 -
Redux源码系列-Redux-thunk源码分析
#理解什么是中间件https://github.com/zp1112/blog/issues/11thunk中间件先看中间件如何使用生效的index.jsimport {Provider} from 'react-redux'import storeData from './reducerfile/index.js'import {createStore, applyMiddle...原创 2019-07-11 17:44:52 · 489 阅读 · 0 评论 -
Redux源码分析--dispatch如何更新store
createStore目的:返回新的stastecreateStore = (…arguments) => newState先来看creatStore部分源码export default function createStore(reducer, preloadedState, enhancer) { let currentReducer = reducer let...原创 2019-03-22 16:28:09 · 825 阅读 · 0 评论 -
项目实战遇到坑-react-redux-typescript--(持续更新。。。)
通用工具函数实战坑一:节流函数失效节流函数错误写法const debounce = (func, wait ) => {// 放在这里失效, 无法节流,猜测是因为react合成事件,会在调用成功后注销掉事件,导致泄漏为全局变量的timer失效// 所以无法通过对timer来判断是否有重复定时事件了 let timer const context = this // ...原创 2019-06-14 18:24:56 · 624 阅读 · 0 评论 -
React源码系列-connect源码分析
connect源码分析connect使用方式import React, { Component } from 'react'import { connect } from './react-redux'class App extends Component { render () { return ( <div> <p &g...原创 2019-07-07 17:23:31 · 333 阅读 · 1 评论 -
React项目实战通用公共组件 --- 优化过的AutoComplete
优化Ant Design自带的AutoComplete组件Ant Design自带的AutoComplete组件,当传入的数据(dataSource)达到5000条以上,进行搜索的时候页面超级卡<AutoComplete dataSource={dataSource} />而实际项目中经常会是用这个组件,于是对其进行封装,在支持其原生所有属性的同时,通过为AutoCom...原创 2019-07-12 18:22:44 · 1484 阅读 · 0 评论 -
React源码-setState
setState调用过程setState->this.updater.enqueueSetState->scheduleWork->requestWorkenqueueSetStateconst classComponentUpdater = { ... enqueueSetState(inst, payload, callback) { // 获取...原创 2019-07-06 11:35:02 · 148 阅读 · 0 评论 -
了解React.createElement
了解React.createElement组件通过React.createElement(type,props,children)为什么代码没有使用react相关方法,也要在文件顶部import reactimport React from "react";const App = () => ( <div className='test'>Hello Worl...原创 2019-09-02 22:21:35 · 627 阅读 · 0 评论 -
redux-thunk对比saga优缺点
redux解决异步操作方法redux-thunk优点: 库小,代码就几行缺点:代码臃肿,reducer不再是纯粹函数,直接返回对象,违背了当初的设计原则redux-saga优点: 将异步与reducer区分开了,更加优雅,适合大量APi请求,而且每个请求之间存在复杂的以来关系缺点:1 学习曲线比较陡,理解async await2 而且库也比较大,即使发布的...原创 2019-07-15 22:59:52 · 2455 阅读 · 0 评论 -
saga优点
saga使用后体验优点一,分离了action和effect,变得更纯粹感觉这不是他的核心重点,因为即使分离了,也没法复用action为异步请求,在saga中只不过是,将thunk的异步请求分离到了saga中然后再put(action)等价于thunk 中的dispatch真正优点takeLatest处理重复点击的问题,一定业务条件下不用写debouncetakeLatest,在...原创 2019-07-15 23:03:58 · 468 阅读 · 1 评论