标签: React.js

Vue或React项目生产环境去掉Console.Log的操作

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了,再说以后想再开发还得重新写console。事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的:首先安装terser-webpack-plu...

JavaScript 2021-05-19 72 0 0 阅读全文

React UseMemo和UseCallback的使用场景

useMemo我们知道当父组件发生重新渲染时,其所有(状态、局部变量等)都是新的。一旦子组件依赖于父组件的某一个对象变量,那么无论对象是否发生变化,子组件拿到的都是新的对象,从而使子组件对应的diff失效,依旧会重新执行该部分逻辑。在下面的例子中,我们的副作用依赖项中包含了父组件传入的对象参数,每次...

JavaScript 2021-04-09 58 0 0 阅读全文

React事件机制源码解析

Reactv17里事件机制有了比较大的改动,想来和v16差别还是比较大的。本文浅析的React版本为17.0.1,使用ReactDOM.render创建应用,不含优先级相关。原理简述React中事件分为委托事件(DelegatedEvent)和不需要委托事件(NonDelegatedEvent),委...

JavaScript 2021-04-09 45 0 0 阅读全文

一百多行代码实现React拖拽Hooks

源码总共也就一百多行,看完这个大致可以理解一些成熟的react拖拽库的实现思路,比如react-dnd,然后你上手这些库的时候就非常快了。使用hooks实现的大致效果动图如下:我们的目标是实现一个useDrag和useDrop的hooks,类似以下用法就可以轻松让元素可以拖拽,并且在拖拽的各个生命周...

JavaScript 2021-03-21 65 0 0 阅读全文

浅谈React路由传参的几种方式

第一种传参方式,动态路由传参通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url首页如果想真正获取到传递过来的参数,需要在对应的子组件中this.props.location.search获取字符串,再手动解析因为传参能够被用户看见,传...

JavaScript 2021-03-21 78 0 0 阅读全文

React Ref的使用示例

写了一段时间的react,99%都在写state、prop、useState、useEffect,对ref特别不熟悉,前几天做一个需求,想用ref实现父组件捞子组件的某个状态值,结果失败了,特此整理一下ref相关内容。什么是ref官网介绍:在典型的React数据流中,props是父组件与子组件交互的...

JavaScript 2021-04-09 46 0 0 阅读全文

React 非父子组件传参的实例代码

React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和...

JavaScript 2021-04-22 66 0 0 阅读全文

React 三大属性之State的使用详解

React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了。state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染。这里分别介绍一下在类和函数组件中stat...

JavaScript 2021-04-15 49 0 0 阅读全文

从头写React-Like框架的工程搭建实现

最近在网上看到了BuildyourownReact这篇文章,作者从零开始实现了一个简易类React框架,虽然没有过多的优化,但React中的核心思想ConcurrentMode,FiberReconciler等都有实现,看完后对理解React有很大帮助,因此我想在BuildyourownReact的...

JavaScript 2021-04-15 47 0 0 阅读全文

React Native 脚手架的基本使用详解

构建项目在相应的路径下执行命令行:react-nativeinit项目名(名称不可使用连接符等特殊字符,命名可以参考APP应用名称比如FaceBook)react-native--v//查看版本react-nativeinitdemo--version0.48.0//安装指定的版本react-nat...

JavaScript 2021-04-22 50 0 0 阅读全文

React Fiber结构的创建步骤

ReactFiber的创建当前React版本基于V17.0.2版本,本篇主要介绍fiber结构的创建。一、开始之前个人理解,如有不对,请指出。首先需要配置好React的debugger开发环境,入口在这里:github执行npmruni,安装依赖,npmstart运行环境。二、从React.rend...

JavaScript 2021-04-15 61 0 0 阅读全文

React项目引入Scss的方法

首先下载依赖yarnaddsass-loadernode-sass然后在项目路径node_modules/react-scripts/config/webpack.config.js打开文件找到加入红线内的代码{test:/\.scss$/,loaders:['style-loader','css-...

JavaScript 2021-04-22 74 0 0 阅读全文

React-Native 环境搭建和基本介绍

环境搭建准备1.环境搭建ReactNative中文网2.开发工具前端开发软件:VisualStudioCode移动端开发软件:Xcode、AndroidStudio3.知识储备NodeJSReactEs6,Es7ReactNative介绍ReactNaitve的简介:Facebook在React.j...

JavaScript 2021-04-22 53 0 0 阅读全文

React项目从新建到部署的实现示例

开展新项目本文主要记录最近工作一个新项目从0-1的过程,主要记录3个节点,选型、运行时、上线。项目选型react脚手架初始化,社区比较火的有cra(create-react-app)和umi,从以下几点进行对比最终选择了比较贴合项目的umi。易用性,开箱即用。umi内置了许多功能,可是也带来很多限制...

JavaScript 2021-03-27 71 0 0 阅读全文

TypeScript在React项目中的使用实践总结

序言本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念。关于TS的类型查看可以使用在线TS工具?TypeScript游乐场React元素相关React元素相关的类型主要包括ReactNode、ReactElement、JSX.Element。Rea...

JavaScript 2021-04-22 67 0 0 阅读全文

采用React编写小程序的Remax框架的编译流程解析(推荐)

Remax是蚂蚁开源的一个用React来开发小程序的框架,采用运行时无语法限制的方案。整体研究下来主要分为三大部分:运行时原理、模板渲染原理、编译流程;看了下现有大部分文章主要集中在Reamx的运行时和模板渲染原理上,而对整个React代码编译为小程序的流程介绍目前还没有看到,本文即是来补充这个空白...

JavaScript 2021-04-22 162 0 0 阅读全文

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

1.原生事件原生事件就是js的原生事件,如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制(见下面合成事件),但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件,需要在点击非弹窗区域时关掉弹窗,此时我们只能针对...

JavaScript 2021-05-18 66 0 0 阅读全文

React如何用懒加载减少首屏加载时间

最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目。其中遇到很多问题,最重要的应该是访问速度了。我就想react可不可以和vue一样用路由懒加载来减少首页渲染所花费的时间。于是找到了一个很好用的轮子:@loadable/component使用安装npminstall@load...

JavaScript 2021-04-16 66 0 0 阅读全文

详解React Fiber的工作原理

啥是ReactFiber?ReactFiber,简单来说就是一个从Reactv16开始引入的新协调引擎,用来实现VirtualDOM的增量渲染。说人话:就是一种能让React视图更新过程变得更加流畅顺滑的处理手法。我们都知道:进程大,线程小。而Fiber(纤维)是一种比线程还要细粒度的处理机制。从这...

JavaScript 2021-04-22 51 0 0 阅读全文

React Diff原理深入分析

在了解Diff前,先看下React的虚拟DOM的结构这是html结构IamchildpIamchilddiv这是React渲染html时的js代码自己可以在babel上试试React.createElement("div",{id:"father"},Reac...

JavaScript 2021-04-22 55 0 0 阅读全文