React

useCallBack的使用场景 React

useCallBack的使用场景

useCallback 的真正目的还是在于缓存了每次渲染时 inline callback 的实例,但并不是每个函数都需要使用,无意义的使用反而会使性能下降。 看到这里,有些笔友就要发问三连了。 1.···
react中的css隔离 React

react中的css隔离

一般情况下,我们在react中写css,都是直接以文件形式来写,然后再组件中进行引用,但是这种写法会导致相同class名称引起的样式冲突,这就要求我们在写class时对命名有严格的要求,比如前缀增加组···
react-router-dom V6版本的应用 React

react-router-dom V6版本的应用

react-router-dom v6 整体体验相对于 v5 ,体验要好更多,最大的一个改变,就是曾经的 Route 不可嵌套,整个路由配置必须拆分成若干小块,除非通过 react-router-co···
使用react-hooks在事件监听中state不更新问题 React

使用react-hooks在事件监听中state不更新问题

在使用react开发网站时,使用事件监听是常有的事情,但是有时候你会发现一个问题,就是这个state有时候不更新,始终是一个值,让人很是费解。下面我们来看一下下面这个案例 function App()···
导航栏滚动吸顶并自动高亮和点击跳转锚点 React

导航栏滚动吸顶并自动高亮和点击跳转锚点

在阿里云的云市场页面上有一个效果,就是api导航栏当滚动条滚动到其所在位置时,自动吸顶,当滚动到下方所在导航栏指定的介绍时,自动高亮其导航栏。点击时则会滑动至其内容所在位置。具体效果为下图样式。 实现···
react中setState是同步还是异步的 React

react中setState是同步还是异步的

我们都知道,React框架是由数据来驱动视图变化的,基于状态的管理实现对组件的管理,也就是组件当中的state,通过setState方法来修改当前组件的state,以达到视图的变化。 我们先来看一段代···
react中key的作用是什么 React

react中key的作用是什么

key这个属性一般是在输出循环列表时,react要求我们填写的一个属性,如果不填的话,在控制台会给出警告,当然页面渲染也是可以正常渲染的,但是可能会引发一些不确定的bug,所以我们在写循环列表输出时还···
react-router 4.0组件使用 React

react-router 4.0组件使用

在之前的文章中简单介绍了router4.0版本的基本使用,在这里继续详细介绍一个如何使用4.0版本以及各组件都提供了哪些属性。 BrowserRouter 先从这个组件来说,这是一个使用了 HTML5···
react-router之onEnter和onLeave React

react-router之onEnter和onLeave

在之前介绍过react-router的使用,在这里我们介绍一下路由的onEnter和onLeave,顾名思义,分别是路由进入之前和路由离开之前,我们可以在这段时间内做一些处理。比如下面这个例子 <···
react中使用swiper React

react中使用swiper

最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过在index.html里直接引用swiper的js和cs···
React router 4.0之参数传递 React

React router 4.0之参数传递

在前一篇文章中说到了react router 4的路由如何配置,这篇文章说一下路由跳转的参数问题。路由跳转传参一种方式是在link标签上写参数,另一种方式是通过方法传递参数,下面依次说一下。 先来说一···