随笔分类 -  REACT

react 技能及开发中遇到问题的解决方法
REACT: 为什么不能在if或循环里调用hooks
摘要：关键词：链表， 执行顺序 根本原因：hook之间是通过链表形式进行关联的，hook有next属性来指向下一个hook，如果放在循环、条件中，会破坏原本的结构，一旦变化了，就会出现异常 比较官方的理由： 违反规则一致性： React Hooks的一个关键原则是每次渲染时都按照相同顺序执行。如果在if语 阅读全文
posted @ 2024-07-19 17:18 HandsomeGuy 阅读(463) 评论(0) 推荐(0)
useState（16 - 18版本对比）
摘要：useState的提出是为了在函数式组件之中加入React State 对比： 1、useState 与class组件中的setState的不同： useState是对state变量的替换； setState是对state的合并； 2、合理使用useState(对比 react16 与 react1 阅读全文
posted @ 2022-11-09 19:47 HandsomeGuy 阅读(1047) 评论(0) 推荐(0)
Hooks useContext 实例（小demo）
摘要：唉，看了几片关于hooks useContext的文章，除了千篇一律的抄文档，还是抄，估计自己都没明白吧 本人脑子笨，写个简单的demo记录一下，防止以后忘了 结构 注意分级，别到时候路径没写对又找我事儿 废话不多说，上代码 globalContext.js import React from "r 阅读全文
posted @ 2021-09-03 11:10 HandsomeGuy 阅读(192) 评论(0) 推荐(0)
react context 使用方法 + hooks版本 + class类版本（ 不比react-redux香吗？ ）
摘要：最近写了一个组件，发现别人传递参数后，组件逐层传递数据（props）太麻烦了，而且我也不需要改变根组件的状态值，也不想使用redux， 突然发现 context 很适合使用（ 跨层级传递数据 ） 今天就介绍下context（执行的上下文） 我们和网上的案例不一样，我们分文件写代码，写在不同的js里面 阅读全文
posted @ 2021-08-26 16:54 HandsomeGuy 阅读(469) 评论(0) 推荐(0)
Hooks 面试、开发都用得到
摘要：hooks 为什么使用hooks？(那就夸夸它) 1、多个状态不会产生嵌套，写法还是平铺的 2、更容易将组件的UI与状态分离 3、hook直接用在function当中，不是class,另外每个hook都是相对独立的不同组件，调用同一个hook也能保证各自状态的独立性 函数组件的主体只应该返回组件的h 阅读全文
posted @ 2021-07-08 16:02 HandsomeGuy 阅读(217) 评论(0) 推荐(0)
将数据结构导出为Excel表格，并自定义规定表头
摘要：1、安装 tnpm /npm install -save js-export-excel 2、页面引入 import ExportJsonExcel from 'js-export-excel'; 使用 handleExportExcel(){ let option = {}; //声明一个对象op 阅读全文
posted @ 2021-03-16 11:27 HandsomeGuy 阅读(807) 评论(0) 推荐(0)
REACT前端生成二维码
摘要：1、安装依赖 tnpm/npm install qrcode.react --save 2、使用页面引入并使用 import QRCode from 'qrcode.react'； <QRCode value='https://www.baidu.com/'// 生成二维码的内容 size={300 阅读全文
posted @ 2021-03-16 10:03 HandsomeGuy 阅读(276) 评论(0) 推荐(0)
React中setState如何修改深层对象？
摘要：在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: 这时需要我们修改list中objA中的name属性和objD的属性,遇到这样的情况我们一般会使用什么办法解决呢?其实有三种解决方案: 阅读全文
posted @ 2019-10-09 11:13 HandsomeGuy 阅读(3103) 评论(0) 推荐(0)
react请求接口数据是在componentDidMount 还是componentWillMount周期好
摘要：如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载 React异步渲染开启的时候，componentWillMount 就 阅读全文
posted @ 2019-08-31 22:26 HandsomeGuy 阅读(1410) 评论(0) 推荐(0)
React的性能优化
摘要：1. 在constructor中绑定事件函数的this指向 把一个函数赋值给一个变量，然后用那个变量去执行函数会造成this的丢失，所以需要绑定this，把绑定放在构造函数中可以保证只绑定一次函数，如果放在render函数中绑定this的话每次渲染都会去绑定一次this，那样是很耗费性能的。 2. 阅读全文
posted @ 2019-08-24 09:19 HandsomeGuy 阅读(205) 评论(0) 推荐(0)