React
文章平均质量分 85
博主与React相关的所有文章内容
满脑子技术的前端工程师
一枚热爱分享知识的前端程序猿!!!
现用名:【满脑子技术的前端工程师】 曾用名:[机智的前端小白][前端程序]
展开
-
创建路由React router(使用react-router dom V6版本)
React路由前言一、安装 react-router-dom (V6版本以上)命令行执行如下命令二、配置路由1. import导入组件如下2.导入展示组件(已经要提前写好自己展示的组件)3.在render中的配置如下三、路由的两种跳转方式(1.函数跳转 2.标签跳转)1. Link标签和useNavigate的使用(通过一个组件举例子)2. Link 和 useNavigate 的属性具体信息如下👇🔗配置如下图总结(本文未完结,后续会继续更新)原创 2023-04-25 15:32:52 · 1299 阅读 · 0 评论 -
React中使用 react-toolkit和react-redux 创建redux仓库(一)
系列文章目录前言一、第一步:安装reduxjs/toolkit和react-redux1. 创建一个react项目2.执行下面的npm命令npm命令代码如下:检查依赖安装是否success二、第二步:创建仓库1.创建仓库的具体流程如下2.创建文件结构(可根据自己认识创建文件)3.创建一个Promise模拟network(mockUserInfoFetchData.js)代码如下(这里就不做code解释了)4.createSlice创建reducer并导出Action和reducer(原创 2023-04-03 15:04:29 · 999 阅读 · 0 评论 -
react的严格模式 和 解决react useEffect执行两次
一、为什么useEffect执行两次1.React的严格模式(模版创建项目👇)2.React的严格模式(StrictMode包裹显渲染组件)3.React的严格模式作用作用1:识别不安全的生命周期作用2:关于使用过时字符串 ref API 的警告如下图作用3:关于使用废弃的 findDOMNode 方法的警告作用4:检测意外的副作用(useEffect副作用)1.React的工作阶段2.React严格模式的重复调用3.Tips作用5:检测过时的 context API二、解决us原创 2023-02-28 19:17:12 · 4371 阅读 · 1 评论 -
React hooks之useContext《类比Vue的Provide》(三)
系列文章目录前言1.Vue中的Provide和useContext(相同点)2..Vue中的Provide和useContext(不同点)一、useContext的用法(贼简单,自己看官网还容易看不懂)第一步:创建传值的组件结构(爷爷,父亲,孩子组件)1.说明如下:2.结构如下图:第二步:创建Context(一定要导出)代码如下第三步:书写传值姿势第四步:导入useContext(一定是函数组件)child组件代码如下说明如下图第五步:查看传值结果默认Text按钮修改成Pri原创 2023-02-22 15:42:15 · 847 阅读 · 0 评论 -
React hooks之useEffect《类比Vue来记忆》(二)
系列文章目录前言一、useEffect的三种形态1.useEffect不传第二个参数代码如下:效果图如下:2.useEffect第二个参数传 []代码如下:效果图如下:3.useEffect第二个参数传 [num]代码如下:效果图如下:初始值如下图:点击修改num按钮后结果如下图:点击修改state按钮(不会触发任何一个):4.useEffect总结二、完整代码如下注意⚠️原创 2023-02-10 16:07:03 · 700 阅读 · 0 评论 -
React hooks之useState用法(一)
系列文章目录结构如下一、hooks是什么?useState可以能做什么二、如何使用useState()第一步:创建【函数组件(无状态组件)】函数组件(Child)代码如下:第二步:引入useState代码如下第三步:声明状态数据代码如下tableColumns 的数据第四步:渲染并修改Table数据代码如下结果图如下:初始渲染图如下:点击按钮后的渲染图如下:三、代码解释如下图所示主体代码四、总结原创 2023-02-10 14:27:09 · 740 阅读 · 0 评论