![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 54
Boriska1996
这里介绍不了我。
展开
-
推荐好用的可做动画控制的js库Gsapjs
Animatejs Animayejs 许多小伙伴会在项目中使用到Animaye.css动画库,但是终究是css样式库,同一个页面不同的模块进行操作会有一些坑(例:动画发生的时间难于掌控)。 推荐一个好用的库 Gsapjs 在VUE官网中的状态过渡这节中有用到这个库的例子。 gsap.to() 常用的方法gsap.to()即可搞定大部分的动画效果问题 举例:动态数字累加告别冗余的计时器 figureSurge.vue <template> <div class="figureS原创 2021-09-02 16:00:12 · 2118 阅读 · 0 评论 -
原生JS实现分页及简单搜索
后端不支持分页,前端背起分页锅 项目中有时会出现后端不支持分页和查询的情况,需要前端来处理这个需求。 直接上代码,看得更舒服。 仅需前端分页 consumersList指后台返回的所有接口原始数据(思路:一次性把所有的数据全拿到,再让前端做假数据的渲染),即需要分页处理的数据。 tableData指渲染到table组件中已完成分页的数据。 pagingFunc: 该方法可写在utils方法库中再导出更方便 //写在方法库中比较方便 const pagingFunc = (array, page, size)原创 2021-01-20 11:19:12 · 568 阅读 · 1 评论 -
React HOC高阶组件
HOC高阶组件 功能:组件复用 相似参考点:类似于JavaScript中的高阶函数。二者都是将函数作为参数,在内部进行加工返回后再使用,具有接收和返回其他函数(类)的附加能力,可以把它们想象成游戏当中的”附魔“。 案例:新建一个子组件A,该子组件移动鼠标能获取相应的坐标值。 关键点:在于render。 在rcc类外嵌套一个函数作为构造函数,参可以把这个函数想象为一个二次加工的工厂,参数为需要加工的组件。这里的参数名为;Wcomponent。render返回的就是一个组件,将工厂组件A的state结构赋值给加原创 2020-08-27 17:33:58 · 175 阅读 · 0 评论 -
render-props模式的两种写法
render-props模式 第一种写法: 在mousemove案例中,我自己使用的方式是父子传值的方式进行数据的传递。 有没有更简单的方式呢? 首先通过render将子组件中的数据state返回出去 子组件代码块: import React, { Component } from 'react' export default class index extends Component { constructor(){ super() this.state={原创 2020-08-27 15:58:25 · 626 阅读 · 0 评论 -
react context组件传值
react context组件传值 这种传值方法一般适用于多层传递 父-------->子-------------->孙 思路: 不管后代怎么嵌套,后代都是消费者Consumer ,父组件都是生产者 Provider。后代的值都是从父组件中获取的,个人认为父组件有点类似于Vue中的VueX。表面是嵌套关系 ,但是获取到的值都是父组件的。 后代的组件需要放在标签内部,不然会报错(详情可见:子组件第12行代码)。 关键点(很重要) 父组件导出生产者: export const {Pr原创 2020-08-26 16:34:42 · 302 阅读 · 0 评论