React 学习日记
关注
分享
扫一扫
react学习的笔记，从头学React
eswang
这个作者很懒，什么都没留下…
展开
-
写storybook时报错 preview hooks及Webstorm与VS Code的全方位比较
描述其实是个小错误，就是怎么也想不通，还以为hooks不能直接写story，想想也不对啊，难道只是不支持useContext吗？之所以有这个想法是之前在使用react-three-fiber时遇到的一个BUG，redux的数据是不能在一个 canvas组件中通过useSelector等API拿到的，所以在这里想当然想偏了。错误是这样的：Storybook preview hooks can...原创 2020-04-26 00:42:23 · 894 阅读 · 0 评论 -
storybook生态初体验
前言上一篇文章简单介绍了一下storybook，这一篇用个实例来做一下。生态首先因为是配合React和CRA使用，所以需要一下几个插件：@storybook/addon-info@types/storybook__addon-inforeact-docgen-typescript-loader第一款是为了展示源代码等信息用的，第二款是类型文件，第三个是一款webpack插件，主要解...原创 2020-04-24 00:27:48 · 968 阅读 · 0 评论 -
storybook上手（安装分析，修改配置）
前言这个名字大家可能再很多地方都见过，今天我们来真正上手一下。安装storybook作为UI库设计的好朋友，在很多地方都有用武之地，不限于View库或者MVVM框架，这里以React为例。npx -p @storybook/cli sb init注意，下周速度感人！这里因为我已经使用CRA创建项目，所以项目会在原有工程上做一些修改。首先是package.json： "scrip...原创 2020-04-23 19:13:20 · 3483 阅读 · 0 评论 -
Jest和testing-library/react--React的单元测试
前言测试一直是忽略的东西，虽然之前简单上手过Jest，但是总体来说很浅显，这次深入一下React的单元测试。Jest关于Jest，这里简单回顾一下：test('test common', ()=>{ expect(2+2).toBe(4) expect(2+2).not.toBe(5)})test('true', ()=>{ expect(1).toBeTru...原创 2020-04-23 17:45:51 · 4508 阅读 · 2 评论 -
React事件，闭包，JS模拟虚拟DOM等
事件React.nativeEvent.currentTarget可以拿到原生事件绑定的位置，指向的是document，即事件都挂载到document上。e是不需要传递给事件的，默认会拿到.React为什么需要默认支持SCU，它原本可以实现一个深比较，但是开发者如果不去遵循不可变数据的规则，SCU默认是不会执行的，数据变化了也不会渲染，因为a.push后，a==a。所以通过手动优化虽然...原创 2020-03-24 21:30:42 · 530 阅读 · 0 评论 -
React类组件，为什么我们需要Redux
前言作为一个起步在hooks发光发热时期的小白，对类组件的不熟悉的劣势渐渐显现出来，类组件生命周期甚至没有写过demo去验证一下。生命周期先贴出来最新的生命周期图解，然后今天被问到了如果需要初始数据应该怎么操作。之前遇到这种情况肯定是三元判断，没数据就用做个loading，或者骨架屏之类的。不过这里对方一问我就在想是不是要在willmount里面请求之类的，因为我记得willmout是在r...原创 2020-03-18 00:45:15 · 429 阅读 · 0 评论 -
Next.js动态路由的使用与上次个站更新的补充
前言目前网络上关于Next.js的动态路由都还是使用路由别名配合服务端编程来实现的，其实Next9已经很好的实现了声明式的动态路由，而不久前Next 9又更新了9.2.2版本，带来了新一波的更新。动态路由动态路由是9.0更新的东西了，半年多了但是介绍它的文章并不多，这其实是一个很好用的功能，之前Next.js饱受诟病的动态路由只能通过query的方式实现，使得路由都是这样式的：localh...原创 2020-02-18 23:21:57 · 1992 阅读 · 0 评论 -
给Next.js加个antd用的Nprogress进度条
前言用的别人的Nprogress的样式，这里也算拿来记录一下，很方便的工具，没什么依赖就能和其他框架继承。用法yarn add nprogress新建一个文件，如nprogress.css:#nprogress { pointer-events: none;}#nprogress .bar { background: #29d; position: fixed; ...原创 2020-02-13 21:40:20 · 1416 阅读 · 9 评论 -
一文了解ReactHooks下的重复渲染类性能优化问题
前言由于React自身的原因，父组件的状态改变时，即使子组件并不依赖该状态，他仍然会得到渲染，这就导致了性能问题，关于性能优化一直是区分小白React开发者和进阶开发者的重要利器。Memo提到性能优化，那不得不提到Hooks出来前，针对函数式组件发布的Memo，旨在解决前言中提到的问题。看一段代码：const Child = (props) => { console.log(...原创 2020-01-15 12:37:12 · 6402 阅读 · 1 评论 -
React H5开发遇到的两个问题
前言在使用create-react-app开发React移动端应用时，遇到了两个问题，一个是如何在其他设备上查看自己本地开发的网页，另一个是React Hooks的一个错误。局域网不同设备查看本地开发应用这个问题其实我一直没有太注意过，一个是需求也不是很大，毕竟所有的都是我自己一个人参与开发的，不需要团队协作对于同一局域网下协作开发自然也不太在意；另一方面就是，create-react-ap...原创 2020-01-02 21:57:08 · 1111 阅读 · 0 评论 -
在自己的项目中使用styled-component
前言今天还是围绕react中的css解决方案写的一篇文章，根据神三元大佬的掘金小册，我尝试在自己的项目中使用styled-component，第一次接触大佬的编程思路，总体下来感觉收获良多，再次与大家分享。styled-component首先我们要知道啥是styled-component，首先可以说这是目前最受欢迎的JSS解决方案，首先我们要明确的一点就是这个东西的学习成本虽然不是所谓的零成...原创 2020-01-02 09:53:10 · 1857 阅读 · 2 评论 -
nx 全栈应用脚手架探求
前言为什么要倒置这个呢，首先是这种全栈架构的脚手架其实挺少的，而开始作为一个入门小白，这种能帮你折腾好前后端环境的玩意还是很新奇的，所以在学习Flask+Vue的过程中我就开始在Github上找相关的东西，奈何这样的组合实在偏冷门，所以一无所获万幸的是在学Nest时还真让我找到了个不错的2K+星的全站脚手架，Nx。简介简单说说这个脚手架，自从nest.js越来越火之后，nest.js模仿...原创 2019-12-22 12:14:05 · 1314 阅读 · 2 评论 -
WebGL框架比较与入门
前言为什么要学这个呢，其实就目前来看WebGL与最为人接受的前端开发关系不大，目前主流前端开发来看，webGL实属“旁门别类”，但是我们需要注意的是对于web GL相关需求其实也一直是有的，甚至于说还不少，当然相对于主流web开发还是少很多的。回到正题，其实学这个一个很重要的原因就是需要使用，由于课题成果被老师极为看重，他特别想让我搞出来这种类似3D无人机对战的效果。canvas、SVG、We...原创 2019-12-19 22:21:15 · 1047 阅读 · 0 评论 -
使用JSS（styled-jsx）重组我的博客样式
前言最近在完善之前的项目，看到之前写的七八个!important是真的烦，于是我个人就一直在想相对于Vue的scope来完美解决CSS的污染问题，为嘛React中一直没有一种可以一统天下的方案呢？FB官方是推荐使用的是JSS的解决方案，并且也在进行相关方案的研究，相关的解决方案有很多，这里不一一介绍，主要使用的是zeit出品的styled-jsx来解决。...原创 2019-12-17 21:46:52 · 1451 阅读 · 0 评论 -
Redux技巧及与Hooks，Redux-thunk，axios的使用
前言之前虽然用redux 做过一些小demo，但是真正在项目中使用起来还是有许多问题，这里主要是阅读jspang的文章，关于使用redux 时遇到的一些小坑，转一下希望能实时提醒自己。store是唯一的这个错误大家使用起来很少犯，毕竟react-redux 的存在，我们用Provider包裹时，已经下意识的传了唯一一个store。随着react-redux提供了常用的两个Hooks，我们使...原创 2019-11-25 06:48:20 · 832 阅读 · 0 评论 -
Jest 如何使用 ES6 的import&export
前言Jest是FB出品的测试工具，因为内置工具多，与React集成较好等特点被人们广泛接受，我这些天正在复习一些数据结构算法方面的知识，做题时不想在leetcode上直接写，又不像用vscode的Leetcode插件，于是打算配合jest做一下题目，一方面也是入门一下使用一下jest的API，另一方面也是拥有比较良好的体验。文件首先在官网找个简单的API：算法文件function sum...原创 2019-11-11 06:31:54 · 5685 阅读 · 0 评论 -
你可能忽略的 Next.js
前言看过我文章的可能知道我在前面花费了几篇的篇幅实现了一个简单的博客项目，既然是博客，SSR辅助前台是必不可少的，因此我选择了Next.js，由于前面用过Nuxt.js，所以对于一些API我还没有了解的特别清楚就开始使用了，过程中也果然出现了一系列的问题，因此我觉得有必要写一篇文章好好的去讲讲Next .js的一些进阶用法，期望对你有些帮助。路由由于Next.js是对React的一种比较高级...原创 2019-11-09 07:18:35 · 378 阅读 · 0 评论 -
我在使用Next.js, Antd, @zeit/next-css时遇到的一些问题
前言这是我自己在给基于Next.js的React项目添加样式时遇到的一些问题和想到的解决方案，因为Next.js是对React比较高级的封装，他有着自成体系的解决方案，因此我们在使用antd时很可能会遇到一些莫名其妙的问题网上有一些解决这些问题的轮子，但是不得不说配置起来也是相当费时间的，因此总结一下的话我觉得前台页面最好少用这种样式库，或者使用material design可能坑会少一点。或者...原创 2019-11-09 00:21:17 · 2957 阅读 · 0 评论 -
React-Router 的 Hooks 实现
前言Hooks大行天下之后，关于如何使用 Hooks，如何替代Redux实现状态管理等文章甚嚣尘上，甚至介绍Redux-Hooks实现的文章也有很多，唯独少了全家桶三件套之一的React-Router的Hooks方法，让人有点惊异。其实React-Router4.0版本已经是一两年前的产品了，作者发布4.X时候也明确说过，除非React有重大更新，不然他们不会过多改动React-Router的实...原创 2019-11-08 07:35:52 · 18511 阅读 · 6 评论 -
一个使用Nest.js+graphql+React+MongoDB的Crud Demo (前端)
前言刚刚写完后端的代码刷了下B站,发现有很多小伙伴还是觉得国外火的技术传到国内不一定回火,甚至可能会非常沉寂,我个人感觉,学习新的技术不一定目的性那么强,既然它能在国外大火至少说明它的内核很可能值得我们很多人研究好几个月甚至好几年的,抱着更高一层的思想去学习,很多东西我觉得自然而然会得到的.你们应该知道是什么东西,手动狗头.数据检查React和apollo client,甚至graphql...原创 2019-11-04 09:15:11 · 2517 阅读 · 0 评论 -
精度React核心概念 （2）Suspense
前言我们知道React Conference每年都会搞个大动静，前年的Fiber架构优化了React内核的很多特性，去年的Hooks写法大大提升了开发者的开发体验，今年，终于到了Concurrent大发神威的时候了，为了这个东西，React团队已经努力了四年，如果说Hooks给开发者扇去了火焰山的烈火，那么Concurrent可以说给用户建了座避暑山庄，而Suspense就是这座山庄的青山绿水。...原创 2019-11-03 07:31:14 · 553 阅读 · 0 评论 -
精读React核心概念（1） --React Fiber
前言最近为了深化自己React核心概念的学习，在掘金上认真学习荒山大佬的文章，个人感觉主要有两部分，一部分是每年的React Conf推出的新的核心特性的深入理解，一种是React的开发规范和设计原则。个人学习过程中感觉到受益匪浅，因此在这里根据自己的学习总结一下，肯定没有荒山讲得好，大家可以通过这个链接去看荒山大佬的文章，当然如果你想简单的了解一下的话，我的文章会更简单点.单处理进程调度在...原创 2019-11-03 06:22:08 · 198 阅读 · 0 评论 -
写个博客吧（根据标签分类与仿dev.to的面包屑实现）
前言之前基本完成了列表页和详情页的构建，接着构建一下根据标签显示列表的功能，以及头部组件的跳转，面包屑等逻辑的实现等，因为一些点击动画还没有想好怎么实现更好，这里先没有管，再看看medium等网站的交互逻辑再说吧。接口还是因为next.js的缘故，前台的动态路由都是用query的形式完成，但是对于后端接口就无所谓了，使用 param写起来很简单，所以我们类似于id选择文章接口实现以下即可：...原创 2019-11-01 20:59:34 · 240 阅读 · 0 评论 -
Zeit 的一些产品 --swr,next.js,hyper and now
前言最近把首页换成掘金推荐之后，设置了一下查询github最近一月最新ts开源项目，其中一个项目很是引起我的注意，不仅仅因为它的简介有React Hooks，他的公司也着实吓人，zeit如果大家不熟悉的话，那么我会告诉你next.js就是他家的。因此我去搜了一下这个公司包括他的一些开源项目，令人赞叹Next.js首当其中的这个非常优秀的SSR框架就不必多说了，甚至可以加入React全家桶套餐...原创 2019-10-31 04:45:37 · 1053 阅读 · 0 评论 -
关于TS在React-Redux-Hooks中使用的问题
前言上一篇文章我们通过介绍三种不同的实现计数器的方法简单讲了react，redux，hooks的几个重要特性和基本用法，因为我创建脚手架时使用的是TS的写法，所以在写代码的时候还额外遇到了一些问题，前两个例子因为没涉及到什么东西，所以和JS的写法差不多，但是最后使用Hooks的时候因为设计的方法较多，所以遇到了一个问题，这里记录下来加深对于类型安全和Redux的理解。复盘首先我们还是先把TS...原创 2019-10-31 01:14:18 · 2641 阅读 · 1 评论 -
React 三种计数器实现方式带你一窥Hooks下的状态管理
前言其实今天是想把Hooks的源码整一边，不料，太高估自己了，一天下来不仅源码整的毫无头绪，反而对自己的JS基础产生了无尽的质疑。。。所以今天做点简单的东西，之前学Redux的时候做了三个差不多的计数器应用，使用了不同的React全家桶的技术栈，对比着感觉能让大家有更多的收获，这里就贴出来大家一起学习。最简单的useState这里直接贴代码，还是很简单的：import React, { ...原创 2019-10-30 10:12:09 · 1004 阅读 · 0 评论 -
我们需要Redux for Hooks吗 和 2019 React conf 漫谈
前言在学Redux之前，我其实用Vuex做过一些东西，关于Vuex，核心其实是三点，mutations, actions, states,对于Redux我们同样有一份类似的图：关于redux的内容这里不做太多讨论，因为已经有足够多的文章是来讲述这个东西的了，而这里我们既然使用Hooks，那么就来关注一下react redux hooks的特性。有点乱，有什么区别？大家要知道的是Redu...原创 2019-10-28 08:24:18 · 373 阅读 · 0 评论 -
PWA 简介和个人看法
前言想起这个思路的缘由是在medium上看到很多关于PWA的文章，但是国内接受度似乎还不高，因此我也没太在意，看了下PWA的简洁，知道它的一些优点之后就没打算深入学习。直到今天看见一篇文章这样形容PWA：可以把它（PWA）理解为国外版的小程序这让我对PWA的实现产生了一定的兴趣。为什么这个问题的原因其实官网有详细的阐述，我这里用比较通俗的语言解释一下：首先我们要了解的是原生应用对...原创 2019-10-27 07:28:02 · 857 阅读 · 0 评论 -
写个博客吧 （Nest博客后台接口和与React前端的交互）
关于React JSX语法期望得到字符串或函数却传入一个对象的错误分析Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.原创 2019-10-24 21:57:40 · 898 阅读 · 0 评论 -
ReactHooks, Next.js 与 Axios一起使用的问题
前言关于ReactHooks的介绍这里就不多说了，同时网上也有很多关于如何把React和Axios结合在一起使用的教程，近来也有很多如何使用ReactHooks和Axios一起使用的教程，这些教程获取接口数据的方式大多是用生命周期函数，包括在Hooks之前的生命周期函数以及Hooks中的新生命周期函数useEffect。而在Next.js这个SSR框架中情况是不一样的。Hooks这里主要参考...原创 2019-10-23 03:31:13 · 8063 阅读 · 1 评论 -
写个博客吧（ReactHooks+MongoDB+Nest.js+Antd）前端UI构建的思考
前言不得不说，有些东西你觉得学会了，然而做出来的可能还是一塌糊涂。ReactHooks其实个人觉得Hooks的一些东西很整洁，真的是非常喜欢，胜过Vue，但是可能有一些麻烦的地方，就比如我在使用Antd的"Affix"时就会报错：index.js:1 Warning: Function components cannot be given refs. Attempts to access...原创 2019-10-22 06:58:24 · 572 阅读 · 0 评论 -
Antd 使用时的一些小错误汇总（持续更新）
貌似是因为React版本的变迁，使用antd时会出现很多莫名其妙的小错误，这里汇总一下，目前正在用Antd+React+Nest.js+MongoDB写自己的博客，CSDN更新速度会放缓，这月目标是写40篇左右吧.首先是使用Antd组件时出现的错误，不出意外的话应该是Menu组件：index.js:1 Warning: Function components cannot be give...原创 2019-10-20 05:15:26 · 2883 阅读 · 0 评论 -
一文带你了解Next.js的强大
Next.js作为当前非常火热的React的服务端渲染框架，到底有什么强大的地方呢，我们又如何使用hooks的特性去编写 Next.js 的业务逻辑呢，别着急，慢慢向下看。注意，关于服务端渲染（SSR）的内容我在之前的Nuxt.js中有详细的讲述过，感兴趣的小伙伴可以去这个链接查看。目录项目结构路由钩子函数Axios关于CSS更好的SEOAntd项目结构...原创 2019-10-18 07:23:50 · 3808 阅读 · 0 评论 -
React Hooks学习日记
Reacthooks作为一个比较新的React特性，一定程度上是对React做了一次较大程度的更新，在很多方向都给React的写法提供了新的思路，这里举个小例子：/* * @Date: 2019-10-15 10:31:13 * @LastEditors: Asen Wang * @LastEditTime: 2019-10-15 10:54:25 * @content: I*/...原创 2019-10-17 04:44:44 · 247 阅读 · 1 评论 -
初学React遇到的几个小坑分析
React作为目前世界上最火的前端框架，不学那是不称职滴，今天整理了一下我初学React过程中遇到的几个小坑，因为React是我最晚学习的一门框架，所以中间还会穿插一下与NG和Vue的对比，开始吧。目录数据流双向绑定的问题JSX代码注释className父子组件传值setStateReactHooks数据流双向绑定的问题如果你学过NG和Vue的话，你会发现在他们...原创 2019-10-16 05:14:45 · 421 阅读 · 0 评论