![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
React案例
大风起兮云飞扬丶
Love Life,More Love Code
展开
-
disabledTime禁用时间
ant-design的RangePicker组件disabledTime属性原创 2024-01-30 11:49:54 · 316 阅读 · 0 评论 -
单向数据流的一点思考
你的父亲在家里放了一个存钱柜,你和你的兄弟有钥匙,可以随意打开存钱柜,从而取出里面的钱。当你父亲某天发现钱少了,却不知道是谁用了他的钱。不过此时存钱柜里的余额对于你们三个人来说是一样的,这是没问题的!但是问题在于缺乏监督,你的兄弟以及你的父亲不知道是谁用了存钱柜里的钱。所以说此时要规定要使用柜里的钱,钥匙只能由你的父亲自己保管。如果双向,一个子组件把传过来的props更改之后,如果其他组件也用到这个状态,是不是也跟着被改了。react的setState方法就是那把钥匙,redux的dispatch亦是。原创 2022-09-12 20:37:03 · 127 阅读 · 0 评论 -
react树遍历方法
基于该工具类做出的树选择器demo。一个遍历查询树的工具类。原创 2022-09-09 17:20:54 · 393 阅读 · 0 评论 -
hooks——useReducer使用
对于useReducer,如果你对redux熟悉,你可以把它理解为一个没有全局共享功能的redux。如果不熟,你也可以把它理解为一个加强的useState。2、组件负责发出 action,reducer 负责更新状态的解耦模式。3、通过传递 dispatch ,可以减少状态值的传递。1、可以更好的描述“如何更新状态”原创 2022-09-09 13:08:24 · 66 阅读 · 0 评论 -
react动态加载组件
因为使用的import函数,所以需要在babel中引入一个插件。原创 2022-09-08 11:00:27 · 3072 阅读 · 0 评论 -
验证码倒计时自定义hooks
需要注意:虽然定时器中在不停的调用setTime改变time的值,但是在定时器中输出time的值是不会变的。因为函数式组件中每执行一次setState都会形成一个新的闭包,所以你改变的值只在你新的闭包中才能访问到。但是可使用useEffect+依赖的形式访问到这个值。...原创 2022-08-09 17:00:36 · 174 阅读 · 0 评论 -
为什么要用TypeScript、函数式组件...
相信很多前端小伙伴面试的时候经常被问道为什么要使用TypeScript,或者说他能给我们带来什么好处。最开是我被面试官问到的时候,也只是回答了些啊哦额,但是突然有一天我悟了,大师,我真的悟了。首先说说我的技术经历吧,一直以来我都是使用的react或者是reactNative框架进行开发。最开始使用类组件,做了几个项目之后,又第一次使用函数式组件,并且加入了TypeScript,但是在实际写代码中觉得比较累赘,所以就没怎么使用到,并且一开始并没有觉得函数式组件要优与类组件什么地方。之后我来到另外一家公司,它原创 2021-05-22 23:38:22 · 561 阅读 · 0 评论 -
Redux和React-Redux学习笔记
Redux 是一个通用的状态管理工具,并不局限于某一个框架,只是下雨天(项目中)巧克力(react)和音乐(redux)更配哦!*Redux工作流程:发送一个action给reducer,然后reducer返回值给store这个过程如同你去逛某宝,你想买双鞋,你就要在搜索框中输入你想买的东西的类型,然后你点搜索,这个动作就action。这个action 得交给一个特定的部门来处理,也就是reducer,处理完之后就会把你想要的东西返回到数据库当中,也就是我们这里的store接下来我用代码说明:这就是原创 2021-02-14 19:08:19 · 135 阅读 · 0 评论 -
react中基于moment库实现日历组件
import React, {Component} from "react";import { View, Text, Image, Button, IconSvg} from "app/components";import moment from "moment"; //引入时间模块import y from "app/utils/yunfeiStyle"; //引入时间模块export default class Index extends Component { con原创 2020-07-26 23:49:41 · 613 阅读 · 1 评论 -
js实现群聊@功能
js@功能实现在聊天过程中,我们不免会使用到@功能来针对某个人来发消息。但是要明确一点的是,@功能是属于群组聊天的。所以说1对1的私聊是没有@功能的,所以第一点我们要判断是不是群组聊天,还得判断@符号的输入。我们先来看下面一个例子:如下,是react-native的代码,input框的value是变量input,而input框实时的输入值是text,我们输出看了一下,如图2。我们不难发现text的值永远比input的值的长度大1。所以我们可以通过这个来判断是否是最后的输入。图:1图:2接下来我原创 2020-06-14 00:31:48 · 2550 阅读 · 3 评论 -
React中不一样的标签
React中不一样的标签今天在react的开发过程中,我封装一个组件,通过给这个组件传递一个type来判断是渲染单选框还是复选框。当然在JSX语法中这是一个很简单的问题,一个三目就能实现,但是,今天我要告诉你的是另一种方法,请往下看。如下,给该组件传递了一个type属性,值为Checkbox。接下来,我们进入到该组件中首先,在state中接收type的值,你要直接写也行,个人代码风格。如下图,我们可以直接在标签中使用这个值但是,你会发现,他不给你报错,也不给你渲染任何东西,这就很TM的难受原创 2020-06-06 23:41:09 · 233 阅读 · 0 评论 -
React实现tab选项卡效果
今天在开发过程中,遇到一个问题,有时候我们想要NavLink的active效果,但是并不想做路由跳转,这时候就需要我们自己写功能了,如图所示:首先,通过绑定事件,并传递一个唯一的参数,然后在className通过三目运算符来判断什么时候该添加active效果在state中定义一个current值通过传递过来的唯一参数改变state中current的值总体来说这个方法实现效果还行,但是...原创 2020-02-24 19:02:14 · 2578 阅读 · 0 评论 -
React中input动态绑定值
React动态绑定input输入框的值首先,我们回顾一下vue中的input动态绑定值是用的v-model指令,但是react中没有指令这一玩意儿,那怎么实现数据动态绑定呢?请看下面解释。没错,我们很多小伙伴肯定会想得到在state中定义一个值,然后,通过input的value属性进行绑定,但是仔细想一想,我们就会发现下面这种操作其实就是给value赋了一个空值。从而导致的结果呢就是,你的in...原创 2020-02-22 22:45:08 · 2866 阅读 · 0 评论 -
react中使用map时onClick事件无效问题
React中的一些坑今天做一个列表渲染,然后通过单击某一项,进入对应的详情页面。但是在使用map的时候,onClick无效并且出现了一些异常现象,话不多说,看图:一开始我的li是这样写的:并且,改变this指向,如图然后,我在函数里打印了一下:结果给我把数据像是用了map一样,直接映射了出来,但重点是我还没有点击,也就是还没触发这个函数。解决办法:其实解决办法也很简单,这需要...原创 2020-02-21 21:44:57 · 2759 阅读 · 4 评论 -
vue、react生命周期函数
一、Vue之生命周期函数1.创建前/后:beforeCreate:在实例初始化之后created:在实例创建完成后被立即调用2.载入前/后:beforeMount:在载入之前被调用mounted:在载入后调用3.更新前/后:beforeUpdate:数据更新前调用update:数据更新时调用4.销毁前/后:beforeDestroy:实例销毁之前调用destroyed: 实...原创 2020-02-15 18:59:34 · 282 阅读 · 0 评论 -
React脚手架安装
第一步:打开cmd,最要以管理员身份打开。(这就不解释了,懂的自然懂)第二步:如图输入命令npm i -g create-react-app(如果你没装node环境请安装node.js) 注:查看是否装有node环境可输入命令np...原创 2020-02-11 19:46:56 · 730 阅读 · 0 评论 -
react中关于_this报错处理
_this开头错误处理方案今天同事在写代码时遇到一个bug,具体如图:浏览器很友好的报了this指向问题的错误。找了半天,愣是没发现。最后才反应过来是由于map函数使用function而非箭头函数,改变了this指向。修改后,如图:...原创 2020-02-08 23:59:15 · 423 阅读 · 0 评论 -
react实现todolist
React之todolist react实现todolist,也就一个简易的购物车。难点在于子父组件之间的通讯问题。主要通过一个属性值来传递一个函数给子组件执行,通过这个函数达到给父组件传值的目的。还需要注意的是这个函数的执行环境绑定到父组件上。 &nbs...原创 2020-02-08 22:30:47 · 307 阅读 · 0 评论