React全家桶
Lawliet_ZMZ
ACMERandNODER
展开
-
无限滚动&懒加载&元素位置 etc....
最近遇到了无限滚动的问题,用到了IntersectionObserver API,这里正好就将相关知识梳理整理一下。前置概念知识scrollHeight:容器元素被撑起后的实际大小高度scrollTop:容器元素的滚动距离,也是当前视口相对于容器实际高度定点的距离。offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。el.getBoundingClientRect().top:方法返回元素的大小及其相对于视口的位置。(top相对于视口的高度距离)clientHeight:元素原创 2020-05-12 17:08:05 · 549 阅读 · 0 评论 -
React Hooks的999999个好处
最近做的react项目已经是完全用上了typescript+hooks,先不说typescript吧,hooks是真的香????1.更好的分离页面和逻辑,重用逻辑的方法现在前端项目的组件化,一般都是基于最基础的UI组件库(里面也有组件的功能逻辑),加上业务逻辑,封装一个个component,container。组件是 UI + 逻辑的复用,但逻辑复用能力等于 0。而在项目中,很难做到轻松的把...原创 2019-12-09 00:16:31 · 789 阅读 · 0 评论 -
react-spring介绍(翻译)
在本文中,我们将探索React的最佳动画框架之一:React Spring。 您将学习将组件样式更改为平滑的,基于物理的过渡的一些基础知识。提前需要了解的React Spring具有基于钩子和基于组件的API,这里将专门针对所有动画使用具有基本状态的钩子,建议先学习React Hooks相关知识。环境安装和配置这里使用Create React App来作为脚手架,另外需要安装react...翻译 2019-11-06 12:41:28 · 5204 阅读 · 0 评论 -
Typescript中的对象多可能类型推导的解决办法
我们在渲染复杂对象,比如树组件的树对象,有嵌套对象/数组结构的时候,js的弱类型让我们一把梭,几乎没遇到什么问题(只是写的时候编译没问题把。233。。),结合TS后,对树状数据的递归访问会是一个问题:比如数据源的数据声明为:export interface VoiceSkillResponse { data: { isExistUpdate: number; isNewPr...原创 2019-10-28 15:08:19 · 1659 阅读 · 0 评论 -
React和Vue对比
主要从以下方面对比:1. 团队熟悉程度,学习成本目前前端小组其实都是大部分在写业务代码,都有扎实的javascript基础和社区基础,上手二者的哪个都没太大成本区别。对于个人来说,无论转型深入哪个,都是不错的。所以这一点学习成本上其实没有太大顾虑,主要在下面一点。2. 框架本身对比,优缺点1)react的地位毋容置疑,vue作者都承认:(尤雨溪原话)(后来Flutter和swiftUI...原创 2019-09-11 21:18:34 · 1790 阅读 · 0 评论 -
React优化总结2
函数组件使用memo当父组件给子组件传递了props的时候,如果在父组件没有加判断子组件条件性渲染,eg: {isShowChild&& },每次父组件执行render,子组件(函数)都会重新渲染(执行),这时候如果是在子组件用memo导出,eg:const Child = (props) => { return <div>那一夜{props.Chil...原创 2019-07-12 10:19:49 · 222 阅读 · 0 评论 -
antd中AutoComplete组件的一些问题
最近做自己的一个项目的时候,用到一个自动填充的输入框,因为前端使用的antd,自然就引入了antd中的AutoComplete的组件。官网链接:链接AutoComplete的填充数据有两种用法,一种是dataSouce,另外一种是option,运用option更灵活,可以渲染出自己想要的选择填充数据的样式。由于选择的填充数据是扒的别人的接口,这个接口返回的我想要的数据是带html标签的字符串...原创 2019-06-20 00:57:39 · 10750 阅读 · 1 评论 -
React-Native集成到现有的安卓项目中(坑死了)
React-Native集成到现有的安卓项目中RN集成到ios的参见上一篇:https://github.com/ZhangMingZhao1/MingZhao-s-blog/issues/1毕竟要做跨端,ios调研完了安卓还要再去跑通一下,弄下来感觉安卓比ios更坑一点。RN现在对版本的依赖太固定了,网上问题的教程也太少,版本不一样就不适用了。1.按照官网配置相关环境,后面的项目教程就不...原创 2018-11-30 16:14:09 · 1917 阅读 · 0 评论 -
react-native入门,编写静态页面,集成原生项目
RN上手体验搭建环境:https://reactnative.cn/docs/getting-started/,分mac/win/linux,平台分android/ios。1.创建一个新项目使用rn创建一个项目和把rn技术集成到一个现有的原生项目是有差别的。//创建和运行一个rn项目:react-native init AwesomeProjectcd AwesomeProject...原创 2018-11-23 18:31:07 · 845 阅读 · 0 评论 -
dva踩坑记录(更新...)
dva适合有一定react,redux开发经验的人上手,文档很少。。这里记录下一点踩坑点,使用技巧,一些原理。1.dispatch方法的回调函数怎么使用有时候需要返回数据根据数据作进一步处理,有时候这个dispatch是异步的,所以就需要回调中作下一步处理。查了下资料,有一些方案,最好的还是在你的effects里的generator函数里return 一下你的值dispatch({}).t...原创 2018-11-07 18:07:38 · 1717 阅读 · 0 评论 -
react优化总结--(永久更新中)
1.箭头函数和bind的使用不当类函数里声明方法的时候最好一次声明,只定义一次,什么意思,我们知道在类里面声明方法然后传递出去调用的时候this会丢失,一般用bind或者箭头函数解决,但是我们也要避免两种书写方式,即避免传子组件props的时候写内敛箭头函数或者内敛的bind方式,因为这时候如果我们在子组件调用这个函数,父组件state改变重新渲染后,this.xxx()}或者每次会返回一个新...原创 2019-07-11 23:18:50 · 574 阅读 · 0 评论 -
《React小书》终结笔记
到今天为止终于刷完了胡子大哈的React小书,一开始就是冲着对Redux的理解去的,期间也在课后练习的ScriptOj上完成了小书推荐的题目,第三章是收费的,但是服务器好像挂了,邮件都收不了。。。后来发现react小书网站的第三章就是靠js增加了一层蒙版弹窗。。。在Chrome里把这个页面禁用js就可以看了。。。。React小书地址:链接ScriptOj地址:链接我的ScriptOj ...原创 2018-06-30 23:41:05 · 2333 阅读 · 0 评论