奇粒粒

介绍 自从引入组合式 API 的概念以来，一个主要的未解决的问题就是 ref 和 reactive 到底用哪个。reactive 存在解构丢失响应性的问题，而 ref 需要...

简单来说，react-redux用于将store与React中的页面联系在一起，它可以让 React 组件访问 state 片段和 通过派发（dispatch ）actio...

想要学习react-redux、ReduxToolkit，最好先了解一下redux，这对于后续学习会有很有帮助~...

目前前端已经是组件化的天下，然而CSS的设计本就不是为组件化而设计的，目前组件化框架中都需要一种合适的CSS解决方案。在组件化中选择合适的CSS解决方案应该符合以下条件...

开发中，想要给组件增加显示/消失的过渡动画以增加用户体验。React社区提供了 react-transition-group 用来完成过渡动画，该库可以帮助我们方便的实现....

用一段现实小故事来引入今天的主题：CSS预处理器。CSS预处理器流行库有Sass、Less、Stylus。我们今天以Sass为例来讲解相关的概念和语法。建议收藏，内容简练且...

一、Portals 某些情况下，我们希望渲染的内容独立于父组件，甚至独立于当前挂在的DOM元素（默认都是挂载到id为root的DOM元素上的） Portal提供了一种将子...

一、什么是高阶组件 高阶组件是参数为组件，返回值为新组件的函数 高阶组件并不是React API的一部分，它是基于React的组合特性而形成的设计模式，高阶组件在一些Re...

使用ref获取DOM 在React的开发模式中，通常情况下不需要也是不建议去直接操作原生DOM的，但是某些特殊情况确实需要去获取到DOM进行操作，比如： 在React...

React在props或state发生改变时，会重新执行render函数，产生新的DOM树；新旧DOM树会进行diff操作，计算出差异后进行更新。React需要基于这两棵....

Context的设计目的是为了共享那些对于一个组件树而言是“全局”的数据。Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树...

如果要实现可扩展的组件，在Vue中会通过插槽来实现，那么在React中是否也存在插槽呢？ 实际上在React中是没有插槽这个概念的，因为React非常灵活，可通过以下两种方...

父组件向子组件传递数据 基本使用方法 父组件在展示子组件的时候，有时需要向子组件中传递数据： 比如在Main组件中使用了 Banner子组件及Header子组件等，在...

生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段： React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周...

组件化是一种分而治之的思想：如果我们将一个页面中所有的处理逻辑全部 放在一起，处理起来就会变得非常复杂，而且不利于后续的管理与扩展...

一、React中为什么使用setState 在使用React时，并不能通过直接修改state而让React重新渲染界面，必须通过setState才行： 因为如果直接修改s...

一、为什么需要脚手架 如果我们只是开发几个小的demo程序，那么永远不需要考虑一些复杂的问题: 现代的前端项目已经越来越复杂了，不会再是在HTML中引入几个css文件，引...

一、认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢？ 其实是不可以的，如果我们将 type="text/babel" 去除掉，那么就会出现语法错误：...

React开发依赖 react：包含react所必须的核心代码 react-dom：react渲染在不同平台所需要的核心代码 babel：将jsx转换成React代码的工...

前言 领导今天又来活了😣，要记录每个页面的停留时间，以及页面的操作，是由哪个页面跳转过来的，给每个页面生成GUID上报给服务端，并且需要携带设备型号和设备唯一标识🙄...