
react
噢,我明白了
HTML CSS JS 框架 react
展开
-
Redux中间件redux-thunk使用详解
redux-thunk主要用于处理reducer无法处理的异步1.什么是异步?同步:就是指前一个任务完成之后在继续执行下一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。异步:每一个任务有一个或多个回调函数(callback),前一个任务结束后,不执行下一个任务,而是执行回调函数,后一个任务不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。2.异步通常会发生在比较复杂的功能使用中axios请求接口数据接口数据返回则为异步。原创 2023-04-21 13:54:35 · 3061 阅读 · 2 评论 -
antv X6旋转属性
为了用户有更好的使用体验,antdv X6除了为我们提供各种图形,线段的绘制,也为我们提供了一些属性值用来控制画布节点,今天我们来看一下最常使用到的节点旋转属性。`值得注意的是enabled可以进行两个方式的配置,一个是直接用bool值进行控制,或传入键值对,以回调函数的方式进行条件限制,并且每一个配置都支持enabled。......原创 2022-08-13 13:24:15 · 1541 阅读 · 0 评论 -
react-redux的基本使用
1.首先创建了一个redux文件夹,里面包括了三个文件。在index.js包裹provider。原创 2022-08-08 23:21:08 · 244 阅读 · 0 评论 -
两数组比较拿出不同值
代码】两数组比较拿出不同值。原创 2022-08-01 23:42:17 · 345 阅读 · 0 评论 -
AntV X6制作画板工具(图形,线段,图片上传)
使用upload上传组件时,需要在接口调用成功之后的函数中进行图片展示,action调用接口,formatter配合拿取后端接口返回的图片数据2.upload内部只可包含一个标签元素否则会失效3.保存画布元素之后,可能会出现img的url丢失的情况,请提前做好存值准备4.使用input进行图片文件上传,需要将文件进行base64格式转换之后才可以在页面上成功展示(使用upload组件可忽略此条)...原创 2022-07-31 23:33:22 · 2183 阅读 · 0 评论 -
AntV G6 初入门(react中的使用)
在React中使用G6,和在HTML中使用基本相同,唯一比较关键的区分就是在实例化Graph时,要保证DOM容器渲染完成,并能获取到DOM元素。经官网介绍,G6内部绝大多数都是基于React技术栈的,所以官方也仅提供一个G6在React中使用的Demo。在需要展示的页面进行相应的引入即可使用。首先,我们来了解一下G6的核心概念。d.配置数据源,渲染。...原创 2022-07-25 23:29:59 · 4149 阅读 · 0 评论 -
promise详解
什么是promise?在我们想要了解promise之前需要理解什么是异步编程1.javaScript异步编程异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。同步是指步骤在一个控制流序列中按顺序执行,而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。同步按你的代码顺序执行,异步不按照代码*顺序执行,异步的执行效率更高。什么时候用异步编程?回调函数,回调函数就是一个函数,它是在我们启动一个异步任务的时候就告原创 2022-07-03 23:43:59 · 221 阅读 · 1 评论 -
React 路由 V5(完整版)
一.什么是路由?指路径url与不同的页面和内容进行相应匹配,可以友好的解决Component到url之间的同步映射关系二.路由的使用(1).下载react-router指令(指定v5版本):npm install react-router-dom@5(2).app内引入(3).路由组件封装为了方便对路由管理,可单独封装起来创建一个router文件夹–router.js在app文件中引入:三.路由重定向在根路径下,或者不存在的路径会自动匹配到Redirect指定的路径(模糊匹配)解原创 2022-06-30 22:34:56 · 5667 阅读 · 0 评论 -
自定义hooks
简单来讲自定义hooks就是把逻辑抽离出来,提取到第三个函数中,当需要使用时可直接调取函数拿到返回值,可进行传参注意:必须以use开头示例如下:原创 2022-06-23 23:01:25 · 1738 阅读 · 0 评论 -
react新老生命周期总结
一.初始化阶段–即将挂载,render之前最后一次修改状态的机会render–渲染页面,只能访问this.props和this.state,不允许修改状态componentDidMount—挂载完成,render完成可以访问和修改页面DOM注:初始阶段生命周期只在初始化时调用一次二.运行中阶段:父组件修改属性触发,可接收到最新的propsshouldComponentUpdata(nextProps,nextState):是否允许页面更新,默认返回true,返回false会阻止render调用原创 2022-06-06 16:46:03 · 374 阅读 · 0 评论 -
react完整版Todolist,增删改查
应用代码如下import React from "react";class Todolist extends React.Component { constructor(props) { super(props) this.state = { list: [{ id: 11, context: 'aaa', ischecked: false,原创 2022-05-30 00:13:09 · 403 阅读 · 0 评论 -
getFieldDegetcorator使用Select组件
当使用form表单的getFieldDegetcorator属性获取Select值时,需要给Select下option的value属性进行赋值,form.validateFields取得的values的值是Select下option的value属性的赋值代码如下:import { Select } from 'antd//从antd中引入Select//用validateFilds取表单值form.validateFilds((err,values)=>{console.log(valu原创 2022-02-07 16:11:12 · 686 阅读 · 0 评论 -
redux应用加减求和功能demo
redux工作原理图1.去除Count组件自身的状态count组件为我们需要使用的求和组件2.src下建立redux文件,redux内部创建store以及reducer等等:-redux: -store.js -count_reducer.js -count_action.js -constant.js 3.store.js文件中:1).引入redux中的createStore函数,创建一个store2).createStore调用时要传入一个为其服务原创 2021-12-15 15:07:46 · 1185 阅读 · 1 评论 -
初识redux
首先,附上学习文档,有兴趣的朋友可以认真看着文档学习,此篇内容只做redux精简介绍。一.学习文档1.英文文档: https://redux.js.org/2.中文文档: http://www.redux.org.cn/二.redux是什么1.redux是一个专门用于做状态管理的JS库(不是react插件库)。2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。3.作用: 集中式管理react应用中多个组件共享的状态。三.什么情况下需要使用redux原创 2021-12-14 21:33:09 · 1201 阅读 · 0 评论 -
如何在react中禁止浏览器后退
本人公司项目,业务提出需求要求在登录完成后禁止鼠标后退快捷键操作页面回退至登陆页面。首先,想到了监听鼠标事件,鼠标监听事件包括以下几种:click:单击事件。dblclick:双击事件。mousedown:按下鼠标键时触发。mouseup:释放按下的鼠标键时触发。mousemove:鼠标移动事件。mouseover(mouseenter):移入事件。mouseout(mouseleave):移出事件。contextmenu:右键事件上述所有事件均无法监听到机械键盘鼠标侧边的后退快捷键原创 2021-12-14 20:36:37 · 3863 阅读 · 0 评论 -
React-router
REACT-ROUTER配置:嵌套式(路由配置在组件内部)包容性:(多路由渲染)形态:动态路由理念遵循just Component 的API 设计理念万物皆组件,路由规则位于布局和UI本身之间安装react router被拆分成三个包:react-router,react-router-dom和react-router-native.react-router提高核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需要的特定组件下载指令yarn add rea原创 2021-05-24 16:48:13 · 197 阅读 · 5 评论 -
React制作简单的Todolist
Todolist以下代码直接粘贴到React项目环境下即可使用import {render} from "react-dom";import React,{Component,createRef,forwardRef} from 'react'// CURD//DOTOLIST//受控class ToDoList extends Component { state = { title:'留言板', nikename:'雪雪', message:'所爱隔山海,山原创 2021-04-01 21:35:43 · 289 阅读 · 0 评论 -
组件状态
组件状态state|数据|私有状态|本地状态定义//es6+ //实例属性: state class App{state:{}}//es6:构造器 this.state class App extends React.Component{ constructor(){ this.state={} }}//ES5:createReactClass({ getInitialState:function(){ return { 状态名:值,x原创 2021-04-01 15:53:10 · 217 阅读 · 0 评论 -
React--JSX
JSXjsx是一个 JavaScript的语法扩展,可以理解为js的一个新的数据类型,类XML(JSON前身)语法,出现在js当中,文件为xx.js|xx.jsxvar b= <strong>强壮</strong>语法要求标签要闭合元素必须要有一个顶层元素变量首字母大写代表组件,小写对应是js数据类型属性,小驼峰命名 <xx tabIndex="2">JSX 是一个 JavaScript 语法扩展。它类似于模板语言,但它具有 JavaScrip原创 2021-03-30 22:10:47 · 129 阅读 · 0 评论 -
react-脚手架项目搭建
环境搭建(官方脚手架)可以使用npm,建议使用yarn1.安装 yarn,重启(不重启,别的盘符有可能用不了)打开cmd(小黑框)执行以下命令//查询当前镜像yarn config get registry //设置为淘宝镜像yarn config set registry https://registry.npm.taobao.org///设置为官方镜像//yarn config set registry https://registry.yarnpkg.com2.安装 create原创 2021-03-30 21:28:54 · 762 阅读 · 2 评论 -
react中的几个核心的概念
一.虚拟DOM(virtual Document object Model)1.DOM的本质是什么?浏览器中的概念,用js对象表示页面上的元素,并提供了操作 DOM对象的API(浏览器提供的API)2.什么是react中的虚拟DOM?是框架中的概念,虚拟dom是以js对象的形式存在的是程序员用 js对象来模拟页面上的DOM和DOM嵌套关系3.为什么要实现虚拟DOM(虚拟DOM的目的)为了实现页面中,DOM元素的高效更新4.DOM和虚拟DOM的区别DOM:浏览器中的概念,用js对象原创 2021-03-30 16:51:49 · 332 阅读 · 3 评论