摘要: 性能优化 性能优化,永远是面试的重点,性能优化对于 React 更加重要 在页面中使用了setTimout()、addEventListener()等,要及时在componentWillUnmount()中销毁 使用异步组件 使用 React-loadable 动态加载组件 shouldCompon 阅读全文
posted @ 2022-10-06 09:00 beifeng11996 阅读(39) 评论(0) 推荐(0) 编辑
摘要: 前言 最近一直在学习关于React方面的知识,并有幸正好得到一个机会将其用在了实际的项目中。所以我打算以博客的形式,将我在学习和开发(React)过程中遇到的问题记录下来。 这两天遇到了关于组件不必要的重复渲染问题,看了很多遍官方文档以及网上各位大大们的介绍,下面我会通过一些demo结合自己的理解进 阅读全文
posted @ 2022-10-05 08:19 beifeng11996 阅读(23) 评论(0) 推荐(0) 编辑
摘要: 第一次发文章 not only(虽然)版式可能有点烂 but also (但是)最后赋有手稿研究 finally看完他你有收获 diff算法:对于update的组件,他会将当前组件与该组件在上次更新是对应的Fiber节点比较,将比较的结果生成新的Fiber节点。 ! 为了防止概念混淆,强调 一个DO 阅读全文
posted @ 2022-10-05 08:11 beifeng11996 阅读(45) 评论(0) 推荐(0) 编辑
摘要: Debounce debounce 原意消除抖动,对于事件触发频繁的场景,只有最后由程序控制的事件是有效的。 防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在定时器期间事件再次触发的话则清除重置定时器,直到定时器到时仍不被清除,事件才真正发生。 const debounce 阅读全文
posted @ 2022-10-05 08:03 beifeng11996 阅读(39) 评论(0) 推荐(0) 编辑
摘要: 一、React 渲染流程和更新流程 react渲染流程:jsx -> 虚拟dom -> 真实dom react更新流程:props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树 所以 阅读全文
posted @ 2022-10-04 09:01 beifeng11996 阅读(9) 评论(0) 推荐(0) 编辑
摘要: 我们先看下 React 官方文档对这两个 hook 的介绍,建立个整体认识 useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内(这里指在 React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作 阅读全文
posted @ 2022-10-04 08:53 beifeng11996 阅读(21) 评论(0) 推荐(0) 编辑
摘要: 前言 现在越来越多人开始使用 React Hooks + 函数组件的方式构筑页面。函数组件简洁且优雅,通过 Hooks 可以让函数组件拥有内部的状态和副作用(生命周期),弥补了函数组件的不足。 但同时函数组件的使用也带来了一些额外的问题:由于函数式组件内部的状态更新时,会重新执行一遍函数,那么就有可 阅读全文
posted @ 2022-10-03 08:05 beifeng11996 阅读(123) 评论(0) 推荐(0) 编辑
摘要: 1、JSX 在React17之前,我们写React代码的时候都会去引入React,并且自己的代码中没有用到,这是为什么呢? 这是因为我们的 JSX 代码会被 Babel 编译为 React.createElement,我们来看一下babel的表示形式。 需要注意的是: 自定义组件时需要首字母用大写, 阅读全文
posted @ 2022-10-03 07:54 beifeng11996 阅读(23) 评论(0) 推荐(0) 编辑
摘要: High Order Component(包装组件,后面简称HOC),是React开发中提高组件复用性的高级技巧。HOC并不是React的API,他是根据React的特性形成的一种开发模式。 HOC具体上就是一个接受组件作为参数并返回一个新的组件的方法 const EnhancedComponent 阅读全文
posted @ 2022-10-02 13:27 beifeng11996 阅读(18) 评论(0) 推荐(0) 编辑
摘要: 先来思考一个老生常谈的问题,setState是同步还是异步? 再深入思考一下,useState是同步还是异步呢? 我们来写几个 demo 试验一下。 先看 useState 同步和异步情况下,连续执行两个 useState 示例 function Component() { const [a, se 阅读全文
posted @ 2022-10-02 13:12 beifeng11996 阅读(196) 评论(0) 推荐(0) 编辑