分类：react

2021
07-01

浅谈React 的引入

目录1.CDN引入1.1react(先引入)1.2react-dom(后引入)1.3查看是否成功引入react2.Webpack引入3.create-react-app1.CDN引入和普通的JS库或框架一样，React也可以从CDN引入。在使用CDN引入之前需要了解两种类型的JS文件，一个是cjs，一个是umd。cjs：全称为CommonJS，是Node.js支持的模块规范umd：全称为UniversalModuleDefinition是统一模块定义，是包含Node.js使用的cjs的，兼容包含浏览器、No... 继续阅读 >
2021
07-01

React编程中需要注意的两个错误

React编程中需要注意的两个错误 前言在React编程中，我们习惯用useEffect、useState等Hook去进行开发，但是在开发过程中难免会遇到许多问题，前阵子，我在写代码的时候，踩过不少坑，这里先列举两个较为常见的，也希望读者们看完这篇文章能够避免踩坑！一.useEffect无限渲染背景：页面初始化的时候，我们需要通过useEffect()来进行一些初始化工作。在useEffect()方法中，调用了代码getData()去后台调取数据。比如页面所需的userName字段，我们在获... 继续阅读 >
2021
07-01

详解如何构建自己的react hooks

目录1.常用的一个hooks1.1useState:状态钩子1.2useEffect:副作用钩子1.3useMemo和useCallback2.实现几个自定义的hook2.1获取窗口变化的宽高2.2定时器useInterval3.总结1.常用的一个hooks官方中提供了几个内置的钩子，我们简单了解下他们的用法。1.1useState:状态钩子需要更新页面状态的数据，我们可以把他放到useState的钩子里。例如点击按钮一下，数据加1的操作：const[count,setCount]=useState(0);r... 继续阅读 >
2021
07-01

提高React界面性能的十个技巧

目录shouldComponentUpdatePureComponentuseEffect用React.memo提供记忆窗口化(列表虚拟化)函数缓存延迟加载和代码拆分并发模式、Suspense和useDeferredValue数据获取的防抖(Debounce)和限流(throttle)分析(Profiling)React的生产环境构建总的说来，React是通过维护视图中的内存(in-memory)模型来运作的。这通常被称为虚拟DOM，它可以被用来确定实际DOM何时需要被更新。不过，由于操控实际DOM的成本较高，因此我们需要确保仅在必要... 继续阅读 >
2021
07-01

react合成事件与原生事件的相关理解

目录1.原生事件2.合成事件为什么react事件需要手动绑定this3.原生与合成事件触发顺序4.合成事件和原生事件混用相关疑问：e.nativeEvent.stopPropagatione.nativeEvent.stopImmediatePropagation1.原生事件原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制（见下面合成事件），但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件，需... 继续阅读 >
2021
06-28

详解React 代码共享最佳实践方式

任何一个项目发展到一定复杂性的时候，必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式：Mixin、高阶组件(HOC)、修饰器(decorator)、RenderProps、Hook。本文主要就以上几种方式的优缺点作分析，帮助开发者针对业务场景作出更适合的方式。Mixin这或许是刚从Vue转向React的开发者第一个能够想到的方法。Mixin一直被广泛用于各种面向对象的语言中，其作用是为单继承语言创造一种类似多重继承的效果。虽然现在Re... 继续阅读 >
2021
06-23

关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)

最近，在运行一个老RN项目的时候，使用Xcode运行的时候报了如下的代码错误：Cannotinitializeaparameteroftype'NSArray<id<RCTBridgeModule>>*'               withanlvalueoftype'NSArray<Class>*__strong'Cannotinitializeaparameteroftype'NSArray<Class>*'          &... 继续阅读 >
2021
06-11

react国际化react-intl的使用

react国际化react-intl的使用 react怎么实现国际化？react-intl插件提供了一套实现react国际化的方法，具体实现如下~~一搭建react环境和下载相应插件默认你已经安装了nodejs如果没有装的百度装下这里不再细讲利用react官方脚手架搭建react项目，已经存在有的react项目也可忽略搭建这步；然后下载相关依赖react-intlnpxcreate-react-appreact-intl-demonpmireact-intl-S等待下载完成找到项目根目录下的src文件夹在里面新建一个叫locale的文件夹存放... 继续阅读 >
2021
06-08

React合成事件详解

react合成事件指的是react用js模拟了一个Dom事件流。（fiber树模拟Dom树结构）合成事件的事件流在fiber树中发生捕获和冒泡。从点击输入框开始当你点击input输入框，react在根节点（注1）监听到focus事件（注2）（注3）。如何从原生事件找到对应的虚拟Dom？此时，react得到的信息只有原生事件对象（nativeEvent）。react通过nativeEvent对应的Dom（eventTarget），沿着Dom树向上找到距离该eventTarget最近的被react管理的Dom节点（... 继续阅读 >
2021
06-08

详解React中Props的浅对比

上一周去面试的时候，面试官我PureComponent里是如何对比props的，概念已经牢记脑中，脱口而出就是浅对比，接着面试官问我是如何浅对比的，结果我就没回答上来。趁着周末，再来看看源码里是如何实现的。类组件的Props对比类组件是否需要更新需要实现shouldComponentUpdate方法，通常讲的是如果继承的是PureComponent则会有一个默认浅对比的实现。//ReactBaseClasses.jsfunctionComponentDummy(){}ComponentDummy.prototype=Co... 继续阅读 >
2021
06-05

react配置px转换rem的方法

react配置px转换rem的方法 安装相关的依赖npmilib-flexible--savenpmipostcss-px2rem--save主要用来暴露项目配置npmruneject！如果运行npmruneject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下gitadd.gitcommit-m'自定义名'npmruneject然后打开项目中config->webpack.config.js进行配置//在配置文件中添加如下两行代码//px2rem({remUnit:75})的意思就是1rem=75px这个是根据750px设计稿来的，如果是620的就写62c... 继续阅读 >
2021
06-04

react中props 的使用及进行限制的方法

组件的props（props是一个对象）作用：接收传递给组件的数据特点：可以给组件传递任意类型的数据props是只读的对象，只能读取属性的值，无法修改对象注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到propsprops的使用<divid="test1"></div><divid="test2"></div><divid="test3"></div><!--引入react核心库--><scriptsrc="../js/react.development.j... 继续阅读 >
2021
06-04

React Hook用法示例详解（6个常见hook）

React Hook用法示例详解（6个常见hook） 1、useState：让函数式组件拥有状态用法示例：//计数器import{useState}from'react'constTest=()=>{const[count,setCount]=useState(0);return(<><h1>点击了{count}次</h1><buttononClick={()=>setCount(count+1)}>+1</button></>);}exportdefaultTestPS：class组件中this.setState更新是state是合并，useState中setState是替换。例如：//错误示例i... 继续阅读 >
2021
05-29

react新版本生命周期钩子函数及用法详解

react新版本生命周期钩子函数及用法详解 和旧的生命周期相比准备废弃三个钩子，已经新增了两个钩子React16之后有三个生命周期被废弃(但并没有删除)componentWillMount（组件将要挂载的钩子）componentWillReceiveProps（组件将要接收一个新的参数时的钩子）componentWillUpdate（组件将要更新的钩子） 新版本的生命周期新增的钩子 getDerivedStateFromProps通过参数可以获取新的属性和状态该函数是静态的该函数的返回值会覆盖掉... 继续阅读 >
2021
05-29

ASP.NET Core 集成 React SPA应用的步骤

AgileConfig的UI使用react重写快完成了。上次搞定了基于jwt的登录模式（AntDesignPro+.NETCore实现基于JWT的登录认证），但是还有点问题。现在使用react重写后，agileconfig成了个确确实实的前后端分离项目。那么其实部署的话要分2个站点部署，把前端build完的静态内容部署在一个网站，把server端也部署在一个站点。然后修改前端的baseURL让spa的api请求都指向server的网站。这样做也不是不行，但是这不符合AgileConfig的精神... 继续阅读 >