![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React配套
文章平均质量分 84
react相关知识点总结,涉及react 全家桶,router redux hooks
不见浅诗~
向上攀爬的这条路比站在顶峰更让人热血澎湃
展开
-
React-router源码—好家伙!
本篇文章参考以下博文《图解React-router源码》–魔术师卡颂文章目录前言路由原理实现步骤一、监听 url 变化前言 最近在与前辈的交流过程中,大佬抛出来一个问题,webpack 是如何实现懒加载的?原理可以类比到 react-router 动态路由如何实现?那么带着这一问题,我们今天就来一起研究研究,react-router 源码中,如何做到动态路由的。路由原理 首先我们需要先有一个概念,那就是路由是怎么实现的?原理呢其实就是页面的url发生变化,然后去匹配路径,渲染对应组件。原创 2021-03-31 00:31:49 · 339 阅读 · 0 评论 -
React Hook 到底是个啥?
本篇文章参考以下博文React技术揭秘文章目录前言举个例子自己实现 useState状态保存Hook 数据结构模拟React调度更新流程计算 State前言 最近在和同事们交流的时候,发现大家对 hook 的理解是,这玩意就是生命周期,原来放在生命周期里的东西,现在都要放到 hook 里。 如果刚接触 hook 的话,那么这个解释可以帮助你快速明白 hook 的用法,但是往深了说, hook 与生命周期还是有一定区别的。今天咱们就来研究研究,区别在哪? 阅读原创 2021-03-24 16:43:41 · 465 阅读 · 0 评论 -
手把手撸 React
本篇文章参考以下博文Build-your-own-reactReact技术揭秘文章目录前言准备:Review第一步:creatElement Function第二步:The render Function第三步:Concurrent Mode第四步:Fibers前言 本篇文章带大家一起认识一下 React 的实现原理,然后实现一个小型 React 库。 如果是刚刚接触 React 的同学,不建议直接阅读,文中很多专业名词需要在会使用的基础上再加以理解,如原创 2021-02-22 12:11:54 · 501 阅读 · 1 评论 -
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might ...原创 2021-01-18 13:57:07 · 32012 阅读 · 1 评论 -
React --生命起源(新生命周期)
文章目录生命周期分解图一、新增生命周期1.1 static getDerivedStateFromProps(nextProps, state)1.2 getSnapshotBeforeUpdate(prevProps, prevState)二、修改三、计划删除/即将过时废弃原因协调阶段四、旧生命周期替换方案4.1 componentWillMount4.2 componentWillReceiveProps4.3 componentWillUpdate生命周期分解图一、新增生命周期1.1 sta原创 2020-08-06 11:50:31 · 213 阅读 · 0 评论 -
企业级 Redux 应该怎么用--部署篇
本篇文章参考以下博文说一说React和Redux你知道或者不知道的一些事情kolodny/immutability-helper文章目录前言前言 上一节总结了一下项目结构,相信大家有了一个初步的认识,还没有看的小伙伴戳这里–结构篇,本篇文章,我们结合代码细节,来一起部署一下 redux 。 ...原创 2020-08-05 16:25:11 · 221 阅读 · 0 评论 -
企业级 Redux 应该怎么用--结构篇
文章目录前言一、项目结构前言 最近做项目,发现好多同事对于 Redux 只会照猫画虎,看着原先的代码,可以增加,但是要自己写的时候,就很懵,完全不知道怎么下手。本篇文章,就针对这种情况,做一个整理,希望能帮助各位同学更清晰的了解到 Redux 。一、项目结构 橘色 蓝色 红色 绿色 ...原创 2020-07-30 23:19:32 · 333 阅读 · 0 评论 -
React合成实事件中,事件参数 event 属性值为 null
本篇文章参考以下博文解决react项目中event对象打印的值为null文章目录 橘色 蓝色 红色 绿色原创 2020-07-13 20:27:38 · 859 阅读 · 0 评论 -
React Router--实战篇
本篇文章参考极客时间 React Router 教程文章目录前言一、通过 URL 传参1.1如何通过 url 传递参数1.2如何获取参数1.3如何运用二、嵌套路由前言 上一节总结了一下 React Router 的基本架构,对于路由这个东西,大家应该已经有了一个基本的概念,本篇文章,我们就实际开发当中路由的使用情况,做一下具体分析。上一节没看的同学要补补课哈。React Router,组长的工作一、通过 URL 传参 通过 url 传参是实际应用当中非常常见的一种情况,因为我们的 u原创 2020-06-17 15:18:37 · 308 阅读 · 0 评论 -
React Router,组长的工作
本篇文章参考以下博文文章目录前言为什么使用React Router一、路由定义1.1 路由实现基本架构1.2 React Router 特性1.2.1 声明式路由定义1.2.2 动态路由二、路由实现的三种方式2.1 URL 路径2.2 hash 路由2.3 内存路由前言 最近在研究 React 的相关技术栈,隐隐约约有种感觉,现在的框架发展路线不再是只提供框架,而是一种概念,一种生态,就像你用苹果手机,你使用的不仅仅是苹果的手机产品,它的背后有一套完整的解决方案在支持。首先你必须注册苹果账原创 2020-06-12 21:28:29 · 305 阅读 · 0 评论 -
React Hook 未来很美好
本篇文章参考以下博文文章目录原创 2020-06-09 13:40:41 · 247 阅读 · 0 评论 -
react中的防抖和节流,大佬封装的方法用起来就是爽--我们一起读源码
该篇文章借鉴了一下博文https://www.jianshu.com/p/d8c3bfe10754https://zhuanlan.zhihu.com/p/88799841大佬的轮子只要两步就可以使用import React, { Component } from 'react';import { throttle, debounce } from 'throttle-debounce...原创 2020-03-31 19:20:43 · 1165 阅读 · 0 评论 -
React高阶组件用法总结
高阶组件什么是高阶组件高阶组件就是一个 React 组件包裹着另外一个 React 组件其中“包裹”的概念,因为它可能会有以下两种不同的含义之一:Props Proxy: HOC 对传给 WrappedComponent 的 porps 进行操作,Inheritance Inversion: HOC 继承 WrappedComponent 。Props ProxyProps Pr...原创 2020-03-12 17:07:15 · 566 阅读 · 0 评论 -
React原生事件才是亲儿子,合成事件哭晕在厕所
原生事件:绑定在真实的DOM上,一般在componentDidMount阶段进行绑定,在componentWillUnmount阶段进行解绑,以免内存泄漏。constcloseDom=this.closeAlert;closeDom.addEventListener(‘click’, this.closeMarker, false);合成事件:React将事件绑在虚拟DOM上,在docume...原创 2020-03-09 15:46:45 · 928 阅读 · 0 评论 -
React组件传值,父传子,子传父,父调用子方法,子调用父方法,使用redux情况下如何调用子方法
React组件传值,父传子,子传父,父调用子方法,子调用父方法,使用redux情况下如何调用子方法该篇文章所使用的方法,是react提供的父子页面数据交互,如果熟练掌握react-redux,可以完全省略以下内容。。。个人还是比较喜欢这种直接传值方法的,比较直接,简单易懂(主要是因为一开始redux运用的不熟练)在一些大型的项目开发当中,一定会用到redux,请各位同学要好好练习,今后会对re...原创 2020-03-05 00:21:48 · 1160 阅读 · 0 评论 -
redux配置中间件后,react调试工具不能用
redux配置中间件后,redux调试工具DEVTools不能用,这可咋整我的第一篇技术博客,请各位大佬多多指点,问题如上,我使用的是redux-think中间件,主要用来存放一些ajax请求,配置过程仿照官网,使用webpack来配置打开控制台输入,首先进入我们创建的项目中npm install --save redux-thunk安装完成后,打开store下的index.jsimp...原创 2020-03-03 22:56:36 · 740 阅读 · 0 评论