![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 56
吴冬雪~
Everything is the best arrangement.
展开
-
react项目中,使用.jsx和.js文件书写react代码时,这两者有什么差异性?
对一些编辑程式或打包工具扩充来说,它们还得加上对.JSX后缀的文档的支援,多花了一些工夫,所以有些旧版的编辑程式是没法支持的。所以看个人爽用了,我个人是不用.JSX后缀的文件的。写.VUE文件时官方造成.Vue格式它能够以Vue官方特定的组件组织规则,而.JSX文件和.JS文件所能达到的效果都一样,.JSX文件存在的意义是什么呢?我在js中用JSX的语法写,和在JSX中用JSX的语法写,然后用webpack打包编译,都能达到同样的效果,为什么还会有一个.JSX后缀的文件.答案是"没有"差异。转载 2020-02-18 11:31:56 · 4741 阅读 · 4 评论 -
react18 函数式写法 实现类似vue $set 的方法(immer的使用)
【代码】react18 函数式写法 实现类似vue $set 的方法(immer的使用)原创 2023-04-12 10:16:52 · 262 阅读 · 0 评论 -
useEffect 与 useLayoutEffect
优先使用 useEffect,因为它是异步执行的,不会阻塞渲染。会影响到渲染的操作尽量放到 useLayoutEffect中去,避免出现闪烁问题。useLayoutEffect在服务端渲染的时候使用会有一个 warning,因为它可能导致首屏实际内容和服务端渲染出来的内容不一致。useEffect和useLayoutEffect的区别_溪宁的博客-CSDN博客_uselayouteffect。原创 2022-08-22 18:03:31 · 1017 阅读 · 0 评论 -
useEffect,useCallBack,useMemo 比较
useMemo 一般用来缓存数据使用。在子组件中使用 shouldComponentUpdate, 判定该组件的 props 和 state 是否有变化,从而避免每次父组件render时都去重新渲染子组件。空数组 useEffect 只在第一次渲染时执行,由于空数组中没有值,始终没有改变,所以后续render不执行,相当于生命周期中的componentDidMount。2.useCallback返回一个函数,当把它返回的这个函数作为子组件使用时,可以避免每次父组件更新时都重新渲染这个子组件。原创 2022-08-19 14:33:07 · 160 阅读 · 0 评论 -
react.js 监听滚动事件:window.addEventListener的scroll问题
// 组件加载时componentDidMount () { window.addEventListener('scroll', this.handleScroll, true)}// 组件卸载时componentWillUnmount () { window.removeEventListener('scroll', this.handleScroll, true)}// 监听滚动handleScroll = () => { console.log('进来').原创 2020-05-11 14:14:46 · 3716 阅读 · 0 评论 -
React怎么在函数(方法)里重定向到某一组件
方法一1.首先安装 react-router-domnpm install --save react-router-dom2.在组件里引入 withRouterimport {withRouter} from "react-router-dom";...export default withRouter(NavHeader);3.方法里通过this.props.hist...原创 2020-04-10 22:31:25 · 764 阅读 · 2 评论 -
react中使用jQuery的方法 (安装jquery包,引入jquery)&举例:$.extend 两个json对象合并
安装:举例: 在js代码里,有二个json对象,需要把这二个对象合并起来。 我们可以使用jquery的extend方法来合并二个json对象。 在后面加上输出代码,来查看合并后的结果。 运行页面,在浏览器的控制台上,我们可以看到合并后的结果了。 上面的方法在合并时,如果有相同的key键,会把json2的值覆盖json1...原创 2020-03-24 10:20:39 · 933 阅读 · 0 评论 -
cookies、sessionStorge、localStorage
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。转载 2020-03-12 13:41:45 · 213 阅读 · 0 评论 -
react项目 实现维持登录与自动登录(刷新后依然处于登录状态)store 包 插件 的应用
描述:登录后,刷新后依然处于登录状态(维持登录) 登录后,关闭浏览器后打开浏览器访问依然是已经登录状态(自动登录) 登录后,访问登录路径自动跳转到管理界面1.下载依赖2.utils/storageUtils.js/** 进行local数据存储管理的工具模块* */import store from 'store'const USER_KEY = 'user_key...转载 2020-03-12 13:35:43 · 3297 阅读 · 7 评论 -
Remove untracked files, stash or commit any changes, and try again.(yarn eject 报错)
这是git地址有问题,解决方法git add .git commit -am "Save before ejecting"npm run eject原创 2020-03-10 18:23:29 · 261 阅读 · 0 评论 -
React中的生命周期函数
组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候。使用React.createClass方式定义组件时会使用getDefaultProps这种方式,对于每个组件类来说,该方法只会调用一次,该组件类的所有后续实例将不会再调用,其返回的对象可以用于设置默认的props值。原创 2020-03-09 13:57:28 · 369 阅读 · 1 评论 -
react使用hashHistory实现类似get方法带参数跳转
主页router<Route path="/apartmentReserve/:apartmentId" component={ApartmentReserve}/>前一页引入hashHistoryimport { HashRouter } from 'react-router-dom';传参:btnClick() { hashHistory.push...原创 2019-12-25 10:53:49 · 837 阅读 · 0 评论 -
react后台管理系统(基础插件安装,less文件加载配置)实现antd组件按需加载与修改主题(解决Webpack4版本文件合并后如何配置antd按需加载与修改主题)
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置,需求:实现antd组件按需加载与修改主题。暴露配置:yarn eject (项目下多了scripts 和 config 文件[就是我们webpack 的配置])yarn add less-loaderyarn add less{ ...原创 2019-11-21 19:07:16 · 325 阅读 · 0 评论