随笔分类 - react
摘要:在 React 脚手架(如 create-react-app)生成的项目中,Webpack 的配置是默认隐藏的,因为它使用了一个名为 react-scripts 的包来处理所有的构建和启动任务。然而,如果你想查看或修改 Webpack 的配置,有几种方法可以做到这一点: 使用 eject 命令: 运
阅读全文
摘要:tsconfig.json { "compilerOptions": { "baseUrl": ".", // 路径配置 "paths": { "@/*": [ "src/*" ] }, "target": "ES2020", "lib": [ "dom", "dom.iterable", "esn
阅读全文
摘要:先来了解下react hooks 闭包陷阱: 原因: 闭包陷阱产生的原因就是 useEffect 等 hook 里用到了某个 state,但是没有加到 deps 数组里,这样导致 state 变了却没有执行新传入的函数,依然引用的之前的 state。 解决方式一: 把 state 设置到 deps依
阅读全文
摘要:一、引子 这是关于一把玄铁重剑,一本经书,和一套轻功步法的故事。让我们先从普通程序猿们的日常工作内容说起,一般来说,程序猿们大部分时间关注的可能不是研发某个具体算法,这是算法工程师/数学家们擅长的东东。程序猿的工作主要是通过调用编程环境中现成的工具函数或接口来实现具体的应用功能,将各个底层接口或算法
阅读全文
摘要:react useMemo和 useEffect和 useCallback useEffect effect只能在DOM更新后触发 useMemo 传入 useMemo 的函数会在渲染期间执行,即在DOM更新前触发的,就像官方所说的,类比生命周期就是shouldComponentUpdate use
阅读全文
摘要:creat-react-app生成的项目默认端口号是3000,如下可以更改: next.js按文档生成的项目默认也是3000 加 -p 端口号 即可。
阅读全文
摘要:https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错。。
阅读全文
摘要:react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题。
阅读全文
摘要:使用这些生命周期钩子可以监听到路由相同,参数不同的变化,但是监听不到完全不相同的url的变化。即使路由不同,componentDidMount组件内容所更新的东西变了,但是代码变了,页面没有变,找到了一种方法。withRouter 参考:https://reacttraining.com/react
阅读全文
摘要:react中实现在js中内部跳转路由,有两种方法。 方法一: 方法二: 跳转到外链: 在页面中给一个按钮绑定绑定跳转,如果跳转到项目的路由,引入react-router的Link 使用<Link to="/download">下载</Link> 形式跳转,如果希望页面从新页面打开,加 如果跳转到一个
阅读全文
摘要:具体background简写可以参考这篇文章. 这里注意,如果简写里要写background-size,则这里必须写 / ,否则整个背景图片样式没有解析出来。 它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position
阅读全文
摘要:react获取当前页面的url参数,必须在url路由对应的组件上获取,在子组件上获取不到,为undefined,获取形如 /news/:id 的后面的参数 id 获取形如 /news?id="abc"的 ?id="abc" 部分,
阅读全文
摘要:http://www.css88.com/archives/5206 根据该文章方法,放在react项目中发现并不能实现,仔细观察发现原来react解析出来的css样式中没有了 这个样式 : 然后即可实现。
阅读全文
摘要:当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this。 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确。 错误示范: 正确写法: 问题见这里:https://segmentfault.com/q/1010000015903
阅读全文
摘要:import React, {Component} from 'react'; import { NavLink,Link } from "react-router-dom"; import './index.less'; import PropTypes from 'prop-types'; //这里是重点 import logo from '../../images/hyzklogo.pn...
阅读全文
摘要:网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换。 react中实现起来似乎更简单一些。 我这里的需求是通过搜索框搜索出新闻列表,在已经获取到新闻列表数据中使用filter函数,获取到每一个新闻的title,并定义关键词正则,返回替
阅读全文
摘要:转载自:https://blog.csdn.net/tongshuo_11/article/details/61195232 这里要注意,这样这个div只能放这个html解析的内容,不能再在div里写别的内容,否则会报错。
阅读全文
摘要:如上,tab标签选中加了默认样式,但是其他无论怎么换,首页都是默认选中的样式 这里给index的路由加一个exact就可以了。
阅读全文
摘要:文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html 该文档只给了具体实现思路,下面是我实现的代码。 初学react,如果有写的不规范的地方,望大家多多指正! FilterableProductTable (橙色): 包含了整个
阅读全文