react
文章平均质量分 55
用于记录在学习和开发react项目时遇到的问题和有趣的知识点
拾一·
个人学习笔记
展开
-
useEffct hook模拟生命周期
react中的函数式组件是一个纯函数,它没有自己的状态,也没有自己的生命周期的,因而需要借助hooks去实现更多的功能。1.模拟componentWillMount、componentWillUnmountfunction Demo() { useEffect(() => { // 相当于 componentDidMount console.log("我模拟了componentDidMount") return () =>原创 2021-10-28 08:46:34 · 896 阅读 · 2 评论 -
自定义浏览器滚动条scrollbar样式(IE、Firefox、webkit内核浏览器)
1 IE浏览器1.1 IE浏览器对滚动条的样式属性如下表:1.2 滚动条各样式图示:2webkit内核滚动条样式属性3FireFox浏览器——使用jquery插件插件:jquery-custom-content-scrollerhttp://manos.malihu.gr/jquery-custom-content-scroller/使用案例:<!doctype html><html><head><met...原创 2021-10-16 15:26:51 · 1286 阅读 · 0 评论 -
前端开发使用模拟数据的两个方式以及使用步骤:json-server和mock.js
作为前端开发人员,当后端还没有写好接口,但是我们又不想写静态的数据的话,可以使用模拟数据。1、json-server和mock.js简介 json-server:利用json-server,可以自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。只需要提供一个json文件,或者写几行简单的js脚本就可以模拟出RESTful API的接口。还可以设置表连接。更详细的json-server:json-server - npmhttps://www.npmjs.com...原创 2021-10-14 21:56:44 · 3779 阅读 · 0 评论 -
lazyLoad:React中的组件懒加载案例及注意点
1. 什么叫懒加载? 懒加载:随用随载。即在需要的时候才进行加载。2. 为什么要设置懒加载? React和Vue都是单页面应用。 在单页应用中,如果没有设置懒加载,webpack打包后的文件就会很大;从而造成进入首页时,需要加载的资源过多,时间过长,不利于用户体验。 运用懒加载,就则可以将页面进行划分,在需要的时候加载对应的页面。可以有效的分担首页所承担的加载压力,减少首页加载用时。3. 案例演示注意点1: react是一种按需引入的机制...原创 2021-09-28 19:53:09 · 989 阅读 · 0 评论 -
前端常用库-nanoid和UUID:用来生成唯一的id、key在react虚拟DOM中的作用,以react/vue中key为例子
1.key在react虚拟DOM中的作用简单来说,key是虚拟DOM对象的一个标识,在真实DOM的显示和更新中有着极其重要的作用。当状态中的数据发生变化时,react会根据变化后的新数据去生成新的虚拟DOM;然后,react会将新的虚拟DOM和旧的虚拟DOM进行diff比较;从而决定哪些虚拟DOM可以复用、哪些虚拟DOM需要进行更新;最后,需要更新的DOM转化为真实DOM,进行真实DOM的更新,渲染到页面。可以复用的DOM就继续使用原来的。2...原创 2021-08-19 17:42:13 · 3191 阅读 · 0 评论 -
React 中 refs 的作用是什么?
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return (转载 2021-08-12 09:11:47 · 1002 阅读 · 0 评论