React 17新增的生命周期

一、废除的生命周期官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug,尤其是对于异步渲染的版本由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数componentWillMountcomponentWillRecievePropscomponentWIllUpdate二、新增的生命周期static getDerivedStateFromProps(nex

- 阅读全文 -

Chrome调用notifications 消息推送

之前试了很多方法都不能用,chrome和Firefox都是无效状态,但是360浏览器却坚强的存活着(敬畏之心油然而生)后来发现是因为Windows 10 有一个通知盒子导致推送的通知都收录到盒子里了,并没有对外展示,调整一番Windows后,在Chrome下可以正常访问,但是Firefox至今仍没有调试成功,貌似需要 ServiceWorker去执行,但是各个浏览器对 ServiceWorker兼

- 阅读全文 -

toast&axios控制进度条

下面用了react-toastify和axios ,相关包可以在npmjs中搜索到主要是在axios 提交文件过程中引入一个config ,通过config导出对应的上传进度,通过toast.update修改上传进度条private onUpload() { let toastId: any = null var config = { onUpl

- 阅读全文 -

mapStateToProps,mapDispatchToProps的使用姿势

前言刚接触redux的时候,发现大家对mapSispatchToProps使用有几种方法,而且都跑通了,本文介绍下redux的mapStateToProps,mapDispatchToProps的一些小姿势mapStateToProps(state,ownProps)mapStateToProps是一个函数,用于建立组件跟store的state的映射关系作为一个函数,它可以传入两个参数,结果一定要

- 阅读全文 -

如何将React.Componment作为服务使用

如何将React.Componment作为服务使用遇到的问题:在NextJs中,当通过Axios请求数据时,如何监听并提供一个方法,在请求是显示loading组件,请求结束后若有错误,则弹窗 Error -Toast解决思路:在App.js中增加(或追加一个<div />)=>对该<div />追加相应的展示组件=>通过show:boolean=false控制其

- 阅读全文 -

Cookie, LocalStorage 与 SessionStorage

很早之前分享过基于 session 和基于 token 的用户认证方式到底该如何选择?这篇文章最近在在测试Next登录验证的时候,发现NextJS的构造有些奇特,Next主要是服务器渲染,按照之前写的验证方法(将token存到本地localStorage中)但是NextJs主要在服务器端渲染,并不能取得本地localStorage中的信息,于是转战cookie(希望未来不会更多的在cookie中存

- 阅读全文 -

NEXT.JS中值得一提的功能

一边吃零食一边看完了Next.JS的文档,写的不是很复杂,demo尝试起来也很快速:grimacing:我在看Next.JS文档的时候,是通过yarn init 手动搭建的空项目,然后按照文档一点一点写demo如果您不喜欢init,可以尝试使用create-next-app,接下来我们也提到一些关于create-next-app的安装和使用本篇文章主要是对Nextjs文档读后体会,以及发现的新鲜事

- 阅读全文 -

Creat-React-App&TypeScript&Stylus搭建

t> 前几天给准备了一些简单的简单的React教程,之前在做团队项目的时候,用了大佬们的框架,直接刷刷写就OK,可是当自己去配置一些东西的时候,发现事情并没有那么简单,用了两天的时间反复折腾一些UI,配置TypeScript,每一步都十分艰辛创建React项目这里我们首先采用FaceBook制作的Create-React—App 这个Cli,用脚手架的原因就是,比较方便嘛,先配制出一个架子来

- 阅读全文 -

React 最好的 ui 组件库集锦

这里有一篇讨论,说了哪个才是 React 最好的 ui 组件库。https://discuss.reactjs.org/t/best-ui-library-for-react/2953/5我也不知道。因人而异吧,喜欢用哪个就哪个,只要能解决问题就好。所以这里把一些国内外的 ui 组件库收集一下,希望能找到自己所需。国外bellereact-bootstrapbootstrap 4grommetel

- 阅读全文 -