react框架
文章平均质量分 94
react框架的个人学习记录
庞囧
主业是一个纯前端打字员,生活与工作的平衡点是我的追求。
展开
-
【react框架】跟我一起速读Next.js官方入门教学课程文档
对于那些对Next.js一无所知的前端伙伴来说,最佳的快速入门方法无疑是官方提供的交互式入门教程文档。尽管如此,由于官方教程至今未提供中文版本,这无疑增加了中文用户的学习难度。为了帮助大家节省宝贵的时间,我决定亲自深入学习这些材料,并将我所学到的关键信息整理成文。通过阅读我的文章,你也能迅速掌握Next.js的核心要点。当然学Next.js之前你必须会CRA创建的React项目。文档如果有错误欢迎指正!原创 2024-03-09 21:50:33 · 1735 阅读 · 0 评论 -
【react框架】记录一些TypeScript在React中的注意事项,新人值得一看!
自从GPT出现后,这篇文章原来的内容就显得没啥作用了,这也是这这篇文章不常更新的原因。以后我就记录一些使用心得和注意事项。还是值得新人看的import也可以导入,和import type有什么区别呢?import 和 import type的区别我这里也补充一个原因,在一些第三方库中,他们的package.json中有个types字段,值为这个库的tpye定义文件总入口,也就是说当我们用了import type去引入类型的时候,会根据package.json中types指定的文件去找对应的类型。例如。原创 2023-09-25 15:25:05 · 256 阅读 · 0 评论 -
【react框架】如何手写一个超级mini的React,学完后对框架的理解也会更进一步
本篇文章只是对网站内容,做的一个内容的压缩,结合上自己的理解与想法,告诉已经理解虚拟dom的人怎么去一步一步的写一个超级mini的React。看完后,相信你对框架的理解也会更进一步。有错误欢迎评论指出!以下“网站”一词指代上面的网站(绕口令哈哈)原创 2023-08-21 22:37:12 · 320 阅读 · 0 评论 -
【react框架】别把Fiber整得那么难理解,来参考下我是咋理解的,用大白话解释
看b站的视频和网上一些博客,在讲fiber的时候,动不动就上源码解释,各种高大上的概念词汇,对于第一次接触fiber想了解它的人来说极其的不友好。所以我就在网上看了各种文章和视频,结合自己的理解,梳理了一下,写下这一篇用大白话解释fiber的文章,希望能帮助到新人。文中还有很多不严谨的地方,但这都是为了好理解,我认为学习一个东西,要先理解大概,再去补充细节。原创 2023-08-20 17:45:58 · 326 阅读 · 0 评论 -
【react框架】在写函数时的一些注意事项,虽然很零碎,但很重要
函数接收的参数是一个函数;函数返回的是个函数;原生的高阶函数有:Promise、setTimeOut、很多数据类型的api等等;原创 2021-02-28 10:18:38 · 370 阅读 · 0 评论 -
【react框架】React18 Hooks:我的避坑指南(下)
React的hooks我的理解是分为两个类型,一个是原生的hooks,一个是后期我们开发人员自己封装的自定义hooks。原生的hooks提供了React的基本功能,且使用起来也非常顺手。但我在日常开发中发现了这些hooks在使用上有非常多的注意事项,或者叫做坑,而且有些还挺容易忘记的,所以写个博客记录下。这篇还会讲我对自定义hook的一些心得~上篇地址文章更新记录:简化篇幅,优化记忆点相较于类组件的高阶组件写法(难记加难用),自定义hooks抽离公共代码的方式友好多了。原创 2021-06-26 17:17:45 · 338 阅读 · 2 评论 -
【react框架】React18 Hooks:我的避坑指南(上)
React的hooks我的理解是分为两个类型,一个是原生的hooks,一个是后期我们开发人员自己封装的自定义hooks。原生的hooks提供了React的基本功能,且使用起来也非常顺手。但我在日常开发中发现了这些hooks在使用上有非常多的注意事项,或者叫做坑,而且有些还挺容易忘记的,所以写个博客记录下。下篇地址文章更新记录:简化篇幅,优化记忆点对于一些平时开发根本不会这样做,但是面试会问到的“坑点”,我用(非必须)来标识标题,不是为了准备面试的人了解一下就行。原创 2022-05-14 11:18:51 · 760 阅读 · 0 评论 -
【react框架】组件之间的信息传递都有哪些方式?帮你归纳
文章目录父向子props属性子向父调用父级函数兄弟之间pubsubJS父向子props属性具体可看【react框架】学习记录5-组件实例的三大属性state、props、refs子向父调用父级函数父级首先通过props给子级传递一个函数:updateApp = (info)=>{ console.log('拿到子级传过来的信息', info)}render() { return ( <Zizujian updateAppState={this.updateApp}原创 2021-07-25 15:12:39 · 557 阅读 · 0 评论 -
【react框架】告别过去,现在的react-redux状态管理库既好理解又好用!
React的状态管理库一开始是个第三方库,叫做Redux。后来Facebook发现这个库的使用量很大,于是官方就也出了个功能一样的库叫做react-redux。这就是原本Redux和react-redux的关系。我之前使用过类组件时期的Redux、函数组件初期的Redux,发现都特别难用,哪些简化Redux理解和操作的第三方库也不是那么好用。对应的调试工具还是类似vsconsole那种入侵代码的库。整体和当时的VueX对比,使用体验还是差很多的。原创 2021-08-07 16:35:36 · 1010 阅读 · 0 评论 -
【react框架】更新更麻了,React Router 6的使用学习记录
文章目录前言安装选择路由模式historyhashLInk/routes/routeNavigateNavlinkuseRoutes使用路由表嵌套路由前言代码来源B站尚硅谷教学视频,可结合之前的路由文章【react框架】学习记录9-学习路由react-router-dom的使用React Router 以三个不同的包发布到 npm 上,它们分别为:react-router:路由的核心库,提供了很多的:组件、钩子。react-router-dom:包含react-router所有内容,原创 2022-05-14 21:34:13 · 1543 阅读 · 2 评论 -
【react框架】在类式组件中,setState时尽量不要修改原数据的原因,还有不要直接修改state(知识相关shouldComponentUpdate、PureComponent)
这是一个很重要的知识点,如果不加以注意,很有可能会出现bug,别问我为什么知道哈哈。个人觉得这里是react设计的不太好的地方,不过应该也是有原因的,我们只需要记住setState时尽量不要修改原数据就好,下面来看看原因。UI纯粹、数据简单、场景固定不再包含子组件如果一上来就考虑做成PureComponent,日后拓展必然会换掉。原创 2021-06-20 22:11:44 · 609 阅读 · 0 评论 -
【react框架】学习记录9-学习路由react-router-dom的使用
文章目录前言安装使用相关组件BrowserRouterLink与Route前言附上汉化文档地址安装yarn add react-router-dom使用相关组件BrowserRouter这个组件是history模式的路由器,用于管理包含在内的路由组件,所以一般会直接放在App.jsx外层,在index.js中写:...import {BrowserRouter} from 'react-router-dom'ReactDOM.render( <BrowserRouter&g原创 2021-07-25 22:19:46 · 536 阅读 · 0 评论 -
【react框架】一些零碎知识点的记录:proxy的代理配置、根元素、按需打包引入、异步组件、元素插入
时,服务端接收请求并返回了相应数据,数据回来的时候也是走5000端口,那么react脚手架服务上的axios就会进行拦截,因为跨域了,我们就获取不到这次返回的数据。而代理服务器在脚手架服务上,所以对接前端工程服务器的端口也是3000,那么代理接收到的服务器相应数据就能完美的转交给react脚手架服务上了。由于设置了代理,所以脚手架服务请求的地址需要改为代理的地址,也就是同一个3000端口的地址,那么请求方法的url就从。的资源,找不到会给这个本地小代理,让它帮我们去请求远程服务器。原创 2021-07-24 18:05:46 · 1582 阅读 · 0 评论 -
【react框架】组件的新生命周期(包括错误捕获),分阶段记忆,减少心智负担
按照我的学习理念,学新不学旧,尽量减少心智负担。所以旧的生命周期我就不记录了。整体和vue也非常像。原创 2021-07-13 23:01:37 · 358 阅读 · 2 评论 -
【react框架】类式组件实例的三大属性state、props、refs
这次来讲讲属于类式复杂组件的三大属性(函数式的后面hooks里会讲)原创 2021-07-05 22:29:08 · 283 阅读 · 0 评论 -
【react框架】一些关于样式写法的心得记录,例如怎么去写局部的css,以及容易忽略的svg的使用等等
如上面说的,个人觉得其实在一般情况下的开发中,全局css和css module一起用基本就够用了,但看到网上都比较推崇css in js的写法,所以个人也来学习一下。简单来讲就是把css用js去表达出来,有更高的扩展性和自定义性,目前网上已经有很多成熟的方案了,这里就记录一下比较轻量的一种方案—emotion库。用create-react-app创建项目的,只需要在你写的css文件上命名成xxx.module.css,然后正常引入到你的组件即可。主要是解决某个标签中的className动态变化的情况。原创 2021-07-11 11:35:57 · 464 阅读 · 0 评论 -
【react框架】一次性讲明白各个组件概念(类式组件与函数式组件、受控组件与非受控组件、简单组件与复杂组件、高阶组件)
而函数组件的props是从参数传递进来,每次函数组件render时,props都是当前状态下的数据,那么在点击时的函数组件拿到的name一直就是旧值并等待3s后打印,等父组件的name修改后,函数组件重新render,props的值更新,但是执行函数的还是上一个状态的函数组件,所以3s后打印的是旧值。当开始点击后,父组件把name这个值修改了,类组件3后s打印出的值是最新的,而函数组件打印出的是旧的。//render是放在哪里的?我的理解是,类组件通过this的方式去获取props,拿到的永远是最新的值。原创 2021-07-24 19:48:52 · 421 阅读 · 0 评论 -
【react框架】体验第一个react例子,认识并学会写JSX
没react介绍,懒得记哈哈。如果会vue,学起来难度就减少一些。知识点的学习来源于B站尚硅谷的系列教学视频,已投币哈哈,后面文章的记录就不再提及了。以下用原生以cdn的方式引入react在线js文件,这样立马就能体验到react。JavaScript XML,react定义的一种类似于XML的JS扩展语法,JS + XML本质是方法的语法糖。XML:简单来讲就是一种用于存储和传输数据的格式,很像html,因为格式中有很多浪费空间的写法,于是后来有了JSON格式。XML现在还有使用需求。原创 2021-07-03 20:31:24 · 441 阅读 · 0 评论