![](https://img-blog.csdnimg.cn/f401770f3a0a4815bdd6a844e79e9bf4.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 73
1
Justin0223
I will be okay
展开
-
React-sticky的吸顶效果实现
(一)前言相信大多数和我一样,对于postion的属性,依然保留在static,relative,absolute和fixed。而且在这篇文章之前,如果我要实现一个悬浮效果,解决方案监听scroll的位置,动态修改需要定位的元素postion为fixed,以达到定位的效果。但是在了解到react-sticky后,我发现作者提到了postion:sticky,吓得我马上查阅下sticky是什么。...原创 2019-09-07 01:22:08 · 10559 阅读 · 0 评论 -
QuotaExceededError The quota has been exceeded
(一)前言我首先描述下,这种报错出现的场景ios <= 10 真机 Safari 的无痕浏览模式使用localStorage or sessionStorage 的 setItem当然,问题肯定社区有解决方案,以下链接可以满足你想要的答案问题链接1问题链接2问题链接3(二)解决过程如果你看完,那么问题可以总结为,两个方向是我们h5站点增加检测是否支持,并提示用户切换模式我们在不支持情况,默认切到cookie当然因为cookie本身储存空间不大,所以建议如果本地存储大量数原创 2020-08-28 17:33:08 · 3934 阅读 · 0 评论 -
canvas测量文字的真实宽度
(一)前言需求是这样,我们要求antd的table内部的文字都不换行,然后要兼容小屏幕,那么就需要设置scroll值,但是设置值后,会出现偏移,那时候需要设置列columns的宽度,但是之前行可以换行,放不下,会自动换行,现在只有一行展示,在不确定返回的宽度时候,我们就需要实现计算当前行的宽度,自动为他设置上(二)实现具体实现,包含计算纯文本的宽度,设置render的宽度,和手动设置宽度,计算scroll的x的宽度,等一系列计算。这里我只介绍如果计算纯文本中计算出当前的宽度这里我们使用 contex原创 2020-07-23 22:43:52 · 2228 阅读 · 0 评论 -
在React项目中集成动画库
(一)前言其实,对于常用动画,大部分基于css的transition 和animation实现,在总结目前react动画使用时候,大概发现类似本文 React组件动画方案,我们以目前css-module的方式在加载scss文件,并配置了css支持,css不会提供module功能(二)集成animate.css本身,我们最方便是直接集成animate.css,所以大部分场景,我们做入场动画,其...原创 2019-10-21 19:53:22 · 811 阅读 · 0 评论 -
控制视图首次渲染DOM数量
(一)前言谈及相关性能优化,我们可以想到两个方面,一个是架构层级,一个是代码层级。这里我们说下常规代码方面,如果加快页面首次渲染,我们以React.js为例子,其实常规谈及最多就是减少重复渲染,但是如果我们在做一个页面,会有很长视图,用户首次渲染是看不到视图之外的页面的,这时候如果在首次打开页面,就直接进行渲染,那么当后续加载的视图足够大,越容易产生性能瓶颈,或许在web看不出,但是就h5体验方...原创 2019-10-15 14:49:42 · 269 阅读 · 0 评论 -
React 设计模式
(一)前言这里提到的设计模式并不是编程通用的设计模式,如常说的单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式等。而是在设计 React 组件时的一些解决方案与技巧,包括以下几种:(1) 容器与展示组件(2) 高阶组件(3) render props(4) context 模式(5) 组合组件(6) 继承当然概念部分,大家能根据名字猜出,但是我还是要为每种,单独给出demo详...原创 2019-08-09 04:01:34 · 6370 阅读 · 0 评论 -
代码规范之使用eslint和prettier格式化项目代码
(一)前言对于团队而言,不管谁都有自己的代码习惯,这时候如何统一团队习惯来,js当然是eslint,ts对应就是tslint。当然这时候也不可或缺可以将Prettier集成到项目中*(二)安装Prettiernpm install --global prettier安装好后1、打开webstorm设置 (file=>setting=>tools=>flie watcher...原创 2019-08-07 02:02:55 · 2168 阅读 · 0 评论 -
React生产模式下禁止React Developer Tools、Redux DevTools
(一) 前言开发者工具,能方便开发人员在开发环境调试代码,但是如果在生产环境也打开,那么,无疑会让代码细节暴露,所以,我们应该在生产环境中将,react 和 redux的开发工具禁用。(二) 禁用React Developer Tools开发工具都会在window上挂载属性,react就是__REACT_DEVTOOLS_GLOBAL_HOOK__,那么我们的解决方案,就是当process....原创 2019-08-05 02:03:41 · 3386 阅读 · 0 评论 -
面试高频(三:前端路由)
(一)前言单页面应用(SinglePage Web Application,SPA),跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,路由基于pushState,replaceState(history)或者location.hash(hash)多页面应用(MultiPage Application,MPA),页面跳转刷新所有资源,每个公共资源(js、css等)需选择性重新加载,...原创 2019-02-28 14:00:49 · 1083 阅读 · 0 评论 -
React Native三端同构(二: webpack@4脚手架构建和项目代码规范)
(一)前言一个完整的web开发手脚架,应该包含以下babel-loader 图片 音视频 字体 样式处理开发环境配置生产多环境scripts配置,流程化前端生产构建生产环境打包优化, 如构建速度,打包外链库,抽离公共模块,页面切片处理(代码内部),git commit 检查规范 和 eslint配置(二)webpack配置新增eslint配置增加webpack配置使用en...原创 2019-02-26 16:08:58 · 1160 阅读 · 0 评论 -
React Native三端同构(一: 基础方案)
(一) 前言React Native 三端(Web、iOS、Android)同构是指在使用 React Native封装组件 的代码下,让其在浏览器中运行出和在 React Native 环境下一样的页面。对于使用 React Native 开发的页面,如果又单独为 Web 平台重复写一份代码代价是极大的,而 React Native 三端同构能以最小代价做到一份代码三端复用。并且也需要提供W...原创 2019-02-25 18:25:05 · 1315 阅读 · 0 评论 -
升级Babel@6 到 7
(一) 前言新开了pc项目, 在安装babel已经到7,既然如此,就把老项目和新项目统一换到babel@7(二) 升级使用官方命令直接升级# 不安装到本地而是直接运行命令,npm 的新功能npx babel-upgrade --write# 或者常规方式npm i babel-upgrade -gbabel-upgrade --write基本就是将babel- 替换成@ba...原创 2019-02-15 18:55:50 · 6997 阅读 · 0 评论 -
React.js实用小技巧总结(React.Children顶层API)
(一) 正常显示你的 html 代码当我们后台返回的富文本编辑器string html需要显示在html上,那么我们就需要直接显示&amp;lt;div className=&quot;content&quot; dangerouslySetInnerHTML={{ __html: this.state.html}}/&amp;gt;(二) 不常用的render方案this.setState() ...原创 2019-02-10 02:43:48 · 466 阅读 · 0 评论 -
React Native开发(九:兼容平板)
(一) 设置 Deployment Info因为默认rn创建为ipone,在ipod打开有大黑边所以需要 如下配置(二) 设置 比例函数如果默认使用rn的配置,会发现在ipad上面显示的很小,这时候需要缩放函数参考链接import { Dimensions } from 'react-native';const { width, height } = Dimensions.get...原创 2019-01-15 15:10:32 · 3294 阅读 · 0 评论 -
React Native开发(八:实用小技巧总结)
(一) React Native Debugger 中查看 network在我们打开react-native-debugger 时候, 我们不能从network查看网络请求,这时候有两种方案,在index.js 添加以下代码GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;参考...原创 2018-12-28 12:44:53 · 660 阅读 · 0 评论 -
React Native开发(七:如何实现绑定tabbar按钮新增权限判断和覆盖安卓默认返回事件)
(一)前言我们会遇到一种需求,在用户点击tabbar的时候,需要去判断当前用户是否有权限进入页面,那么我们需要在点击时候处理权限,然后跳转。基于这种需求,我们需要提供一个全局的navigationService.js方案提供全局跳转方案(二) 版本环境node 8.0+(v8.12.0)npm 5.0+(v6.4.1)java (v1.8.0_172)&amp;amp;amp;amp;quot;react-native&amp;amp;amp;amp;quot;原创 2018-12-23 19:28:56 · 539 阅读 · 0 评论 -
React Native开发(六:自定义React Navigation 过场动画)
(一) 前言版本环境node 8.0+(v8.12.0)npm 5.0+(v6.4.1)java (v1.8.0_172)&amp;amp;quot;react-native&amp;amp;quot;: &amp;amp;quot;0.57.1&amp;amp;quot;,&amp;amp;quot;react&amp;amp;quot;: &amp;amp;quot;16.5.0原创 2018-12-17 15:53:58 · 2680 阅读 · 0 评论 -
React Native开发(五:整理安卓兼容性)
(一):前言安卓坑如狗!!!这里总结常见安卓兼容方案, 1. adb无法连接魅族手机2. 安卓modal无法覆盖状态栏3. 自定义手势PanResponder在安卓不生效原创 2018-12-05 19:15:37 · 2063 阅读 · 0 评论 -
React Native打包(三:react-native多环境打包)
(一)前言开发环境参考上章集成官方热更新 很详细的热更新链接安卓的参考链接地址(二)背景正常需求来讲,我们需要区分三种环境——开发环境、测试环境、正式环境(也可以成为生产环境)因为热更新分为 Production 和 Staging,所以在实际项目中,热更新如果不区分测试和生产环境,那么每次就重新打包给测试,待版本迭代完成才能热更新生产环境,这明显不合理。(三) 配置安卓为了解...原创 2018-12-04 16:11:18 · 5802 阅读 · 0 评论 -
React Native打包(二:react-native集成友盟)
(一)前言版本环境node 8.0+(v8.12.0)npm 5.0+(v6.4.1)java (v1.8.0_172)&amp;amp;amp;quot;react-native&amp;amp;amp;quot;: &amp;amp;amp;quot;0.57.1&amp;amp;amp;quot;, &amp;amp;amp;quot;react&amp;amp;amp;quot;: &转载 2018-12-04 15:45:47 · 1048 阅读 · 0 评论 -
React Native打包(一: Build archive error vs Xcode10)
报错信息Multiple commands produce '/Users/tu/Library/Developer/Xcode/DerivedData/Tituk-fndmfujccqhdareyswrxhslqzyvn/Build/Intermediates.noindex/ArchiveIntermediates/Tituk/IntermediateBuildFilesPath/Uni...翻译 2018-11-30 14:04:12 · 432 阅读 · 0 评论 -
React Native开发(四:Could not install the app on the device, read the error above for details.)
前言手贱升级mac系统, 然后就报标题错误, 然后virtualBox 失效,重新安装后,导致genymotion 打开 react-native run-android 报上面错误,一开始以为环境变量问题,去其他rn项目 没这问题,然后以为genymotion 问题,确定下sdk位置,发现也是正常。但是其他项目也正常,master切到develop 正常运行,我凌乱了!!然后,我手贱...原创 2018-10-19 17:55:57 · 9693 阅读 · 0 评论 -
React Native开发(三: config.h not found)
前言rn还真是js优先原则,一旦涉及原生,依赖添加和移除都是踩坑开始。关联文件错误截图:不难看出,这是因为 关联关系问题解决方案也很简单cd '当前项目根目录'cd node_modules/react-native/third-party/glog-0.3.4../../scripts/ios-configure-glog.sh其实执行 .sh 命令之后Terminal界...原创 2018-10-19 00:46:38 · 569 阅读 · 0 评论 -
使用rem构建web h5应用 处理chart 和 app webview 在安卓下错乱问题
前言最早基于手淘做过一次H5 rem适配, 当时基于Hybrid APP。后面使用antd-mobile后,使用 阿里的高清方案。css 新增calc 函数 可以处理边框 配合 flex布局。但是字体大小要额外处理,并且部分安卓机型不支持calc。so,最后我还是决定采用阿里的rem。这也是踩坑的开始内嵌rn webview。我们为三方提供一个H5授权页,用于oAuth2 认证流程。在...原创 2018-09-08 16:48:12 · 1397 阅读 · 0 评论 -
React Native开发(二: 手动安装react-native-image-crop-picker)
前言考虑到RN的不稳定性。如果项目迁移, 有些事,真是做一次觉得没什么,但是过段时间如果需要再去做一次,就有点抓狂。项目版本依赖&amp;amp;quot;dependencies&amp;amp;quot;: { &amp;amp;quot;autobind-decorator&amp;amp;quot;: &amp;amp;quot;^2.1.0&amp;amp;quot;, &a原创 2018-08-27 10:32:39 · 1305 阅读 · 0 评论 -
React Native开发(一:环境相关,出现Warning: isMounted(...) is deprecated in plain Javascript Classes)
前言使用React-Navigation出现以下问题:Warning: isMounted(…) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent mem...原创 2018-06-17 18:35:17 · 1371 阅读 · 0 评论 -
axios请求service, csv文件下载
前言请求库:基于axios。 服务器:返回csv文件(一) 重置request.js 通用请求库const BASE_URL = process.env.REACT_APP_BASE_API;const instance = axios.create({ baseURL: BASE_URL, timeout: 10000,});instance.intercepto...原创 2018-06-14 11:19:47 · 3354 阅读 · 0 评论 -
基于Fetch封装Requst工具类
安装依赖$ yarn add isomorphic-fetch新建utils/Requst.js 文件import fetch from 'isomorphic-fetch'// this is base_url, you can set webpack/***new webpack.DefinePlugin({ 'process.env': { ...原创 2018-04-09 19:36:53 · 687 阅读 · 0 评论 -
深入浅出React+Redux(六:模块化 React 和 Redux 应用)
前言我们已经介绍了React 的基本工作方式,也知道了 Redux 在组合React 组件中的作用,但是更多的只是了解其基本原理和使用方法 。但是接下来我们将要了解为以下几个方面1) 模块化应用的要点2) 代码文件的组织方式3) 状态树的设计4) 开发辅助工具(一)模块化应用简单的看,React和Redux都执行一个公式 UI=render(state)...原创 2018-03-09 13:14:53 · 1226 阅读 · 0 评论 -
从零搭建react 脚手架
前言将目前前端最主流,应用最广的webpack总结下目前常用的构建工具facebook官方的create-react-app(官方推荐) 基于webpack@3的版本原创 2018-03-08 14:48:54 · 6436 阅读 · 0 评论 -
深入浅出React+Redux(四:Redux - 组件的Context)
前言对于工作遇到些不开心的事,我也只能说,运气不好吧,算了不提,React这东西是不难,搭个状态处理,真的是什么一下子维护很多文件夹。不过,vue还真是出了名简单,上手难度就在vuex api哪里。其他真的是把ng整个组件传值,模板语言拿过来,换汤不换药。(一)Redux 特点Redux顾名思义(Reducer+Flux)1. 唯一数据源唯一数据源指的是应用的状态数...原创 2018-03-03 23:24:17 · 3498 阅读 · 1 评论 -
深入浅出React+Redux(三:Flux单向数据流,相关代码在github flux分支)
前言通过上章,我们能感觉到仅仅通过prop和state 管理React大型项目,简直是个巨大,恐怖乃至不可完成的挑战。因为社区和个人喜爱还是推荐Redux做项目的状态管理。但是作为单向数据流鼻祖的Flux,也是读者需要整理下区别的。(一)前端MVC 框架的缺陷附上一篇文章(需要翻墙): 为什么说客户端MVC已死MVC框架是业界广泛接受的一种前端应用架构类型,它把应用分成三个部分原创 2018-01-22 17:01:41 · 1239 阅读 · 0 评论 -
深入浅出React+Redux(二:React 组件的生命周期)
前言如同人有生老病死 , 自然界有日月更替,每个组件在网页中也会被创建、更新和删除,如同有生命的机体一样 。React 严格定义了组件的生命周期,生命周期可能会经历如下三个过程:装载过程( Mount),也就是把组件第一次在 DOM 树中渲染的过程;更新过程( Update ),当组件被重新渲染的过程;卸载过程( Unmount),组件从 DOM 中删除的过程 。三种不同的原创 2018-01-16 15:20:25 · 2040 阅读 · 0 评论 -
深入浅出React+Redux(一:React 组件的数据)
前言 “差劲的程序员操心代码,优秀的程序员操心数据结构和它们之间的关系 。 ” 一一Linus Torvalds, Linux 创始人首先附上package.json的依赖包,版本问题导致包导入问题,需要自行调整{ ...原创 2018-01-15 21:33:20 · 1419 阅读 · 0 评论 -
React And TypeScript(三:集成React-Router和React-Router-Redux)
前言需要注意的是,现在react-router已经到了V4版本了,并且官方说这是一个完全重写的版本。所以在我不太熟悉的情况下,保险起见还是先选择V3版本,等以后再更新。(一)安装React-Router$ yarn add react-router@3.0.5 @types/react-router@3.0.5 --dev将App.tsx相关三个文件移动到 views下,并...原创 2018-01-10 13:12:38 · 4985 阅读 · 3 评论 -
React And TypeScript(二:集成Redux)
前言社区的状态管理有多种方式,看团队和个人偏好。目前主流状态管理举例。Redux idea来自于Flux。依赖于通过集中和不可变的数据的存储的方式来同步数据,并且该数据的更新将触发我们的应用程序的重新渲染。 状态更新通过reducers的函数的显示处理。 由于组织明确,通常更容易理解一个行为将如何影响你的程序的状态。-MobX ,该库已经通过TypeScript编写完成。依赖于r...原创 2018-01-10 12:59:36 · 6086 阅读 · 6 评论 -
React And TypeScript(一:基本环境+集成antd)
前言上东家前端pc项目是15年的React+Flux,当然架子肯定是其他大牛搭建的。本司刚刚最近才有新版pc的需求(ps:之前只要个静态pc和mobile页面, 简单搭建webpack@3打包文件),所以需要重新搭建一个pc。想来想去,angularjs太重,没人用它做pc,不合适;vue,算了吧,文档都不知道长什么样子;jquery,用它估计也是想找死。最后技术定位到React+ React...原创 2018-01-09 16:30:02 · 14981 阅读 · 4 评论 -
React写法和演进
1. 原始的createClass写法对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种写法过来的。 createClass写法是基于es5,它实际上是React对象的一个顶层API,它只接受一个配置对象作为参数,如下:var React = require('react');var转载 2017-09-12 13:29:50 · 546 阅读 · 0 评论 -
Redux-Router
1. 基本用法React Router 安装命令如下$ npm install -S react-router使用时,路由器Router就是React的一个组件。import { Router } from 'react-router';render(<Router/>, document.getElementById('app'));Router组件本身只是一个容器,真正的路由要通过Rou转载 2017-09-12 11:55:30 · 4983 阅读 · 1 评论 -
Redux(三: React-Redux)
React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)。UI 组件有以下几个特征。 只负责 UI 的呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux 的 API转载 2017-09-12 11:36:55 · 372 阅读 · 0 评论