a253399414的博客

记录一下工作中学习，需求背景：用户在上传项目中遇到的问题图片时，需要先用截图工具保存图片到本地，然后再点击上传按钮来上传图片，操作繁琐，能不能像聊天工具一样支持复制粘贴上传。需求描述：支持用户粘贴上传图片。首先先展示一下项目中使用上传组件的逻辑，展示不了公司代码，就自己写的小demo，代码有待优化。import React, { useEffect, useState } from 'react';import { Upload, Modal } from 'antd';import * as _

加粗样式近期接到了一个使antd的Drawer组件可以拖拽的需求，以前没有写过类似的案例，只能去网上搜索解决方案，发现有挺多react的拖拽的组件，但是项目中不允许随便引用组件，只能使用原生HTML的拖拽方案了。下面记录一下学习的心得：了解HTML的拖拽注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。提示： 链接和图片默认是可拖动的，不需要 draggable 属性。在拖放的过程中会触发以下事件：在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖

入职前端工作到现在差不多有一年半的时间了，和朋友偶然聊天的时候被问到，能不能用所学的前端知识做一个家族关系的族谱，可以使家族关系更加简单明了。当时听完这个需求，觉得可能还是蛮简单的，后来动手做的时候，发现族谱的连线，是需要根据返回的数据动态生成的，这就是我这个小前端，有点头秃了????。解决技术困难当时阻碍我前进的就是如何实现族谱的连线以及根据数据渲染它们的对应关系，后来在逛博客的过程中，发现了antdesign的charts图表组件。利用这个组件，如果可以进行一些改造，可能就可以实现族谱的关系图。

虚拟DOM(Virtual DOM)什么是虚拟DOM一句话总结虚拟DOM就是一个用来描述真实DOM的javaScript对象,这样说可能不够形象,下面分别用代码来描述真实DOM以及虚拟DOM。真实dom：<ul class="list"> <li>a</li> <li>b</li> <li>c</li></ul>对应的虚拟DOM:let vnode = h('ul.li

错误在我们日常编写代码是非常常见的。举个例子，在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象。作为一个框架，react也有自身对于错误的处理的解决方案。如何捕捉错误为了解决出现的错误导致整个应用崩溃的问题，react16引用了错误边界新的概念错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组

一、是什么首先，给出react组件中进行列表渲染的一个示例：const data = [ { id: 0, name: 'abc' }, { id: 1, name: 'def' }, { id: 2, name: 'ghi' }, { id: 3, name: 'jkl' }];const ListItem = (props) => { return <li>{props.name}</li>;};const List = () =>

最近在工作中有一个版本对比的需求，左右两边的展示不同的版本，在滚动左边版本的时候右边版本也随之滚动。当时做的时候准备打算用一个大盒子包括这两个盒子，滚动的时候滚动最外面的大盒子，后来因为组长规划的是两个版本用一个组件，传一个叫做position的props，再传不同版本的数据就可以。后来考虑了一下，在我的知识范围里面如果不能用盒子包括，就只能用事件监听加上操纵dom了。下面是我的实现方法。 import React, {Component} from 'react';import './Test.css

react项目中，很常见的一个场景:const [watchValue, setWatchValue] = useState('');const [otherValue1, setOtherValue1] = useState('');const [otherValue2, setOtherValue2] = useState('');useEffect(() => { doSomething(otherValue1, otherValue2);}, [watchValue, ot

目前的web项目很多都是SPA(单页面应用)模式，它内部使用的就是Router组件方式，实现跳转。本次记录的是React-Router中的react-router-dom的使用，大部分react的项目中基本使用的都是这个路由组件，它分为BrowserRouter和HashRouter的方式。一、路由基本使用路由的使用思路是，在index.js中引入BrowserRouter,使它能够全局生效，在TotalRoute.js中注册路由，在导航栏组件中使用路由。import React from "reac

写在前面：本人在工作开发中使用的是React框架，在工作之余，学习使用了Vue相关知识，以下是我在使用Vue和React框架的过程中得出的一点结论，欢迎大家批评指正。下面我将通过以下几个方面来阐述我的观点：MVVMVirtual DOMReact 和 Vue 之间的区别MVVMMVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做

**一、初始化**（1）getDefaultProps()getDefaultProps这种定义方式是用在定义组件时用的是React.createClass方式的如果使用的是es6的语法，例如用的是class 组件名 extends React.Component的话，就不能用getDefaultProps这种方式去定义props了，而是应该用 static propTypes ＝｛｝来定义，这样就不会有警告了。（2）getInitialState()与getDefaultProps的区别在于前

**1.写在前面**在android中实现调用相机的权限的前提是APP请求到调用相机的权限，这个权限在android/app/src/main/AndriodMainifest.xml中进行配置<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name ="android.permission.READ_EXTERNAL_STOR

阿里云实现个体推送提供了两种方法：一种是在用户打开应用时生成deviceID，这种ID是设备的唯一标识，可以用通过此ID实现对用户通知的精准推送，其二是通过deviceID查询用户登录应用的账号（这个账号是开发者自定义的账号，可以是手机号或注册号等）这个账号在阿里云API中称为Alias（别名）。本次实现个推的方法是获取应用的deviceID，对deviceIID进行推送。下面介绍一下具体流程：1.前端获取deviceID在前面的广播推送中，导入了三个阿里云的配置文件，在PushModule.java文

集成阿里云推送的方式有两种：一：通过maven库达到快速集成的目的，二：通过手动修改配置配置文件的方法，由于手动修改配置文件过程繁琐且极易出现问题，所以强烈建议使用maven库达到快速集成的目的。下面是详细步骤：1.在Project根目录下build.gradle文件中配置maven库URL：maven {url 'http://maven.aliyun.com/nexus/content/repositories/releases/'}2.在android/app/build.gradle文

前言浏览一些主流面试题的时候，发现有的面试题让动手写一个基于antd的树形控件的增删改功能，本来以为antd的组件应该挺简单的，没想到动手做的时候还是费了不少力气。所以就打算记录一下，实现需求的整个过程。一、 引入antd的树形控件使用过antd的小伙伴应该都知道，使用antd就是把它的代码示例粘贴下来，然后根据自己的需求和antd提供的API进行更改。所以这里我也是找一个简单antd树形控件代码示例，不管三七二十一先粘贴进去看看结果怎么样。import React from "react";im