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