react
swallowblank
这个作者很懒,什么都没留下…
展开
-
什么时候一个变量应该以state的形式出现?
当props或state改变,触发rerender时,相当于会重新执行一遍这个函数,所以这个函数中定义的局部变量也会初始化,因此下面代码中,按下按钮后会触发。(不会初始化),即使是父组件重新渲染,子组件中的这种变量依然不会刷新。当props或state改变,触发rerender时,这个变量。依然不改变——一直是。原创 2022-08-23 21:17:15 · 538 阅读 · 0 评论 -
为什么函数组件会渲染两次?
为什么函数组件会渲染两次?原创 2022-08-23 19:52:06 · 640 阅读 · 0 评论 -
在函数组件中模拟类组件的生命周期 & 获取某个HTML元素下第一个特定的元素
先说一个最经典的DidMounted,其他的后面遇到了慢慢补充。在函数组件中使用useEffect并且,依赖列表为空,可以模拟DidMountedReact.useEffect(() => { const headerList = []; const markdownBody = document.querySelector(".markdown-body"); const markdownNavLinkContent = document.querySelector(".原创 2021-04-20 21:14:23 · 130 阅读 · 0 评论 -
记遇到的两个BUG
未解决bug1我们假设有这么一个statethis.state = { isShow: false, events: []}show是一个非常简单的原始类型的属性,events是一个很长的对象的数组。show用来控制modal是否展示,events用来渲染一个list。但是当我只改变show 的值的时候,也会触发class组件的render()函数,下图中,135-137行的代码就会重新被执行,这无疑是造成巨大浪费的。首先,我猜想,虽然这里会执行136行很多次,但是在diff算法下,发现不原创 2021-03-13 17:21:26 · 130 阅读 · 0 评论 -
react react-router-dom 踩坑——根据是否登录进行页面展示
文章目录react react-router-dom 踩坑——根据是否登录进行页面展示网上的参考react react-router-dom 踩坑——根据是否登录进行页面展示我做了一个简单的前端,为了省力,把登录成功的token保存到localStorage里,我在一个受保护的页面被访问之前在useEffec中判断是否存在token,如果存在就可以渲染,否则用react-router-dom的Redirect进行重定向。但是似乎出了一点问题。大概代码逻辑如下:export default funct原创 2020-10-07 10:51:06 · 717 阅读 · 1 评论 -
如何在React.FunctionComponent中使用async/await同步获取后端api数据
直接上例子const BlogList: React.FunctionComponent<IProps> = (props: IProps) => { let [fakedata, setFakeData] = React.useState<blogsData>([]); React.useEffect(() => { async function temp () { let res = await getBl原创 2020-05-12 11:05:39 · 2763 阅读 · 0 评论 -
typescript遇到的坑
ts很多对象是用接口声明的。interface IState { content: string; nickName: string; labels: string;}const A: IState = { ...}如果你用keys + map 遍历改变它的一些值会不成功。const _data = Object.keys(data).map((e) =&...原创 2020-05-08 12:07:06 · 478 阅读 · 0 评论 -
Material UI for React 使用总结
1 常用断点xl = {2}lg = {3}md = {4}sm = {6}xs 6002 Typography 排版属性variant= “h1-h6 | subtitle1 | subtitle2 | body1 | body2 | button | caption | overline”3 Button啥都没有是透明的、无阴影的按钮<Button>Hello&...原创 2020-05-05 15:02:09 · 582 阅读 · 0 评论 -
typescript in React written at [May 2020]
reference:https://alligator.io/react/typescript-with-react/https://www.bilibili.com/video/BV1z4411W7wa?p=5https://create-react-app.dev/docs/adding-typescript/#getting-started-with-typescript-and-re...原创 2020-04-25 15:48:14 · 298 阅读 · 0 评论 -
利用Web Audio API进行音频的可视化处理 + 利用刚学的React构建一个在线的可视化简单音乐播放器
文章目录唠唠叨叨1. Web Audio Api是不是人傻了?2. 实际效果3. 代码在我的Github上唠唠叨叨最近快放寒假了,虽然在实验室也不知道干嘛,但是目前还不能走,每天要打卡。最近学了一下react,而且无意中看到了一篇讲音频可视化的,于是就想将两者结合,反正也没事干。1. Web Audio ApiWeb Audio Api是一个很强大的Api而我只是用了其中很小很小的一部分功...原创 2020-01-16 19:04:14 · 1200 阅读 · 4 评论 -
我在学习React等一系列产物中遇到的那些坑
文章目录1. ref在函数组件中不能使用的问题2. 循环触发setState()3. react中的自定义组件并不能绑定事件1. ref在函数组件中不能使用的问题报错:Error: Function components cannot have refs. Did you mean to use React.forwardRef()?其实也用不上什么React.forwardRef()...原创 2020-01-15 17:46:49 · 501 阅读 · 0 评论 -
Redux\react-redux个人学习指南
Redux1. 什么是Redux?图片转载至蒙朦的文章首先为什么我感觉看Redux的文档很吃力,这是因为我是先学的react,对应上图中的Component,而文档是从Action开始讲解的,而且递归的定义了很多变量,直接就把人绕进去了。2. 如何理解Redux的设计理念我才刚学Redux不到20min,我暂时是这么理解的。首先,state存储在store里,并且被Component...原创 2020-01-10 10:56:57 · 258 阅读 · 0 评论 -
react-router学习-高质量翻译精炼版
@toc[]1. 主要组件路由器 router,like < BrowserRouter>和< HashRouter>路径匹配器 route matchers,like < Route> and < Switch>导航 navigation,like < Link>, < NavLink>, and < Red...原创 2020-01-09 16:38:08 · 131 阅读 · 0 评论 -
我的Gatsby学习记录
文章目录part 4 Gatsby中的数据part 5 Source Plugins and Rendering Queried Data5.1 什么是Graphiql5.2 源插件5.3 用Graphql的查询构建一个文件系统页面part 4 Gatsby中的数据这里介绍了Graphql,以及在Gatsby中它的两种使用方式第一种Page Query:// src/pages/abo...原创 2020-01-06 15:31:17 · 426 阅读 · 0 评论