随笔分类 -  React

React的 自动批处理 和 半自动批处理
摘要：React的 自动批处理 和 半自动批处理( 温馨提醒: 大佬可以跳过 ...) 话不多说, 咱们言归正传 什么是批处理? 我们先看一张图: 这边setState了 3 次, 打印出来 还是 0 ; 而不是1,2,3 没错, 这就是 react 的批处理 批处理 : 是 React 中对于 SetState 的合并, 框架内部替你做了一个合 阅读全文
posted @ 2022-06-18 02:06 大熊丨rapper 阅读(293) 评论(0) 推荐(1)
react-router v6对比react-router v5
摘要：react-router v6对比react-router v5简述: 1. react-router v6 原生支持typeScript ; 安装方法 npm install react-router-dom@6 2. react-router v5 原生不支持typeScript, 需要安装 @types/react-router-dom 来支持ts ; 安 阅读全文
posted @ 2022-06-17 09:28 大熊丨rapper 阅读(718) 评论(0) 推荐(0)
composition api和react hooks的对比
摘要：composition api和react hooks的对比一. 我的走位: 保持中立 1. 各有各的好处, 谁也别说谁 2. 一个东西带来了好处, 相应的副作用肯定也有, 人无完人 二 . vue3 的composition api 和 react hooks 的对比 1. composition api 中的 setup只会被调用一次; react ho 阅读全文
posted @ 2022-06-16 14:12 大熊丨rapper 阅读(407) 评论(0) 推荐(0)
useParams和props.match.params的对比
摘要：useParams和props.match.params的对比注意: withRouter在 react-router 6的版本被废弃了 !!!! 1. useParams 的原理是 React Hooks，可以直接在函数式组件中使用，比较方便 2. props.match.params 则需要使用 withRouter 高阶函数(HOC)包装一下组件，否则无 阅读全文
posted @ 2022-06-15 21:47 大熊丨rapper 阅读(801) 评论(0) 推荐(0)
'webpack://antd/./components/config-provider/style/index.less' URL is not supported
摘要：'webpack://antd/./components/config-provider/style/index.less' URL is not supported去年的问题今年还没解决,版本升级问题 react+antd 引入import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' 报错: Failed to parse source map: 'webpack://antd/./components/ 阅读全文
posted @ 2022-06-14 18:10 大熊丨rapper 阅读(831) 评论(0) 推荐(0)
创建或使用指定版本的 react 项目，比如说 react17
摘要：创建或使用指定版本的 react 项目，比如说 react17一. 问题: 大伙会发现 用create-react-app 创建项目,默认会用最新的react版本 但是某些人就想要指定版本的react搞项目 二. 解决办法 我们可以通过修改package.json来修改react版本 1. 首先，转到 package.json 文件, 并将 react, re 阅读全文
posted @ 2022-06-14 14:59 大熊丨rapper 阅读(3355) 评论(0) 推荐(0)
react18版本useEffect和componentDidMount会被触发两次
摘要：react18版本useEffect和componentDidMount会被触发两次useEffect和componentDidMount会被触发了两次 一. 问题根源: React 18版本的问题 2022 年 3 月 29 日 React 18 发布 官方日志传送门 如果你项目在更新到 React 18 之后迥异行为，或许正是因为 useEffect()或componentDi 阅读全文
posted @ 2022-06-13 15:12 大熊丨rapper 阅读(1655) 评论(0) 推荐(0)
三种获取数据的方法fetch和ajax和axios
摘要：一 .fetch用法 ( 本人比较喜欢fetch,代码精简,虽说目前axios比较流行,但是fetch很多大厂已经开始用fetch开始封装了, 我觉得以后fetch会取代axios和ajax ) 1、第一个参数是URL2、第二个参数可选参数 可以控制不同的init对象3、使用了js 中的promis 阅读全文
posted @ 2021-10-28 16:15 大熊丨rapper 阅读(903) 评论(0) 推荐(0)
react组件的生命周期
摘要：组件的生命周期 （表的链接随时查 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/） 1 . 挂载 2. 更新 3.卸载 参考官网链接：https://zh-hans.reactjs.org/docs/react-compo 阅读全文
posted @ 2021-10-28 10:53 大熊丨rapper 阅读(41) 评论(0) 推荐(0)
react在移动端的自适应布局
摘要：react+flexible适配布局 （1）npm i lib-flexible --save （2）npm i postcss-px2rem --save （3）在 node_modules/react-scripts/config/webpack.config.js 下做如下配置 const p 阅读全文
posted @ 2021-10-27 15:00 大熊丨rapper 阅读(408) 评论(0) 推荐(0)
解决vscode开发react项目没有html标签自动补全
摘要：怎么设置自动补全： 左下角齿轮按钮——设置—— 在搜索框中输入Include Languages，选择Emmet，并在Emmet：include language下点击在setting.json中编辑，添加: "emmet.includeLanguages": { "wxml": "html", " 阅读全文
posted @ 2021-10-27 14:10 大熊丨rapper 阅读(220) 评论(0) 推荐(0)
npx和npm的区别
摘要：npx 是 npm 的高级版本，npx 具有更强大的功能。 用途： 在项目中直接运行指令，直接运行node_modules中的某个指令，不需要输入文件路径 node-modules/.bin/babel.js --version npx babel --version 避免全局安装模块：npx 临时 阅读全文
posted @ 2021-10-27 09:56 大熊丨rapper 阅读(682) 评论(0) 推荐(0)
进入React的世界
摘要：一. React 是什么 1. 声明式写法 2. 组件化 3. 一次学习, 随处编写 二. 为什么要学习React 1. 大厂加持 - Facebook 2. 最流行, 使用人数最多, 最被开发者喜爱 3 简单易懂 三. 准备开发环境 1. 官方脚手架工具 create-react-app 2. n 阅读全文
posted @ 2020-12-30 15:55 大熊丨rapper 阅读(62) 评论(0) 推荐(0)
使用React实现一个TodoList案例
摘要：1.效果图: 2.项目源码 3.源码 TodoList.js import React, { Component, Fragment } from 'react'; import TodoItem from './TodoItem' import './style.css' //定义一个React组 阅读全文
posted @ 2020-10-10 14:28 大熊丨rapper 阅读(246) 评论(0) 推荐(0)