跳到主要内容

5 篇博文 含有标签「React」

工作中使用的就是React

查看所有标签

React构建时不生成sourcemap

· 阅读需 2 分钟
Hanasaki
阿巴阿巴阿巴

生产模式构建静态网页时,默认会生成 .map 文件,比较大,并且部署后通过浏览器访问可以在控制台看到开发时的源代码,虽说是方便调试,但是都构建 Production Build 了还能被查看代码总让人心里不太舒服。

配置

可以通过配置 .env 文件,将 GENERATE_SOURCEMAP 设为 false 即可不生成 sourcemap 文件。

创建 .env 文件,并在文件中添加这行代码

GENERATE_SOURCEMAP = false

react-router v6 路由拦截/路由鉴权

· 阅读需 4 分钟
Hanasaki
阿巴阿巴阿巴

一个很常见的需求:有些路由,需要登录才能访问,不登陆的情况下访问它就跳转到登录页面。这里就用 Context 来写个路由鉴权的小例子。

react-router v6稳定版出来了,有许多改变,以前拦截路由的方式也用不成了。在世界之外遨游了好久终于找到了一篇文章,学废了!整理学习一下分享出来。

react-router v6 路由跳转时页面闪烁

· 阅读需 1 分钟
Hanasaki
阿巴阿巴阿巴

安装react-router-dom的时候版本已经变成6.0.2了,没注意到,结果在写项目时候怪怪的,以往的写法都不对了,照着仓库的例子学了学发现跳转时闪屏。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter,Route, Routes } from 'react-router-dom';
import User from './pages/User/User';
import Main from './pages/Main/Main'

ReactDOM.render(
<React.StrictMode>
<HashRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="user" element={<User />}/>
<Route path="*" element={<Main />}/>
</Route>
</Routes>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);

官方仓库的教程只写了 <Router></Router>,虽然比#号看起来舒服,但是一跳转就闪。

使用 <HashRouter></HashRouter> 就不闪屏了。

React 事件绑定/this绑定的几种方式

· 阅读需 4 分钟
Hanasaki
阿巴阿巴阿巴

MDN中 Function.prototype.bind()

bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

先引入一个例子:

const module = {
x: 42,
getX: function() {
return this.x;
}
};

let unboundGetX = module.getX;
console.log(unboundGetX()); // 该函数在全局范围内被调用
// 输出: undefined

unboundGetX = unboundGetX.bind(module);
console.log(unboundGetX());
// 输出: 42