react

Hook 前言 什么是Hook 自从 16.8 版本开始，hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性。 那么在 React Hooks 出现之前，class 类组件和 function 函数组件有什么区别？Hooks 出现之后，函数组件又是如何满足原来只有类组件才有的功能的？ 1.类组件和没有 hooks 加持的函数组件： 函数组件常被称为无状态组件，意思就是它内部没有状态管理，只能做一些展示型的组件或者是完全受控组件。因此差别主要体现在： 函数组件没有内部状态管理 函数组件内部没有生命周期钩子 函数组件不能被获取组件实例 ref，函数组件内也不能获取类组件的 ref 2.类组件和有 hooks 加持的函数组件： 有了 hooks 加持之后，函数组件具备了状态管理，除了可以使用内置的 hooks ，我们还可以自定义 hooks。 类组件有完备的生命周期钩子，而函数组件只能具备：DidMount / WillUnmount / DidUpdate / willUpdate 函数组件内部可以通过内置 hook 获取类组件 ref，也可以通过一些 API 的组合使用达到获取函数组件 ref 的功能 函数组件具备了针对状态变量的 setter 监听（类似于 vue watch），类组件没有这种 API。（useCallback

vue和react的diff算法，都是忽略跨级比较，只做同级比较。vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。 1. vue比对节点，当节点元素类型相同，但是className不同，任务是不同类型元素，删除重建，而react会认为是同类型节点，只是修改节点属性 2. vue的列表比对，采用从两端到中间的比对方式，而react则采用从左到右依次比对的方式。当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。总体上，vue的对比方式更高效。 来源： oschina 链接： https://my.oschina.net/u/4405012/blog/4266679

首先祝大家五四青年节及五一假期快乐。 在前面系列文章中我们了解5.0最新版本堆栈导航和选项卡导航的用法，今天我们来看看抽屉导航的使用方法。 React Navigation5.0系列一：StackNavigator的使用 React Navigation5.0系列二：TabNavigation的使用 @[toc] 安装 yarn add @react-navigation/drawer 使用 1.导入对应的组件 import { createDrawerNavigator } from '@react-navigation/drawer' 2.创建两个页面 const SettingsScreen = ({ navigation }) => { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>SettingScreen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Home')} /> </View> ) } const HomeScreen = ({ navigation }) => { return ( <View style={{ flex: 1,

目录 前言 geopandas简介 子区域数据分类统计 总结 一、前言 最近碰到一个需求，需要统计某省内的所有市的某数据分布情况信息。现有该省的数据分布情况以及该省的行政区划数据。我通过geopandas库实现了这一需求，在这里简单记录之，供需要的人借鉴。 二、geopandas简介 想必大家对 pandas 都不陌生，它是一个开源的强大的Python数据分析工具。pandas确实做到了灵活、快速、高效的进行数据处理，而 geopandas 是在pandas的基础上添加了对空间数据的支持，实现了读取空间数据以及对空间数据进行处理。关于其介绍和安装等请参考其github主页，本文不再赘述。 三、子区域数据分类统计 直接进入正题，现有某省的分类统计数据shp文件以及此省的行政区划数据shp文件。 3.1 引入geopandas 为了使用geopandas库，首先需要将其引入。代码如下： from geopandas import * 3.2 读取此省分类统计数据及行政区划数据 然后从该省的分类统计数据shp文件中读出此数据。代码如下： provincedata = GeoDataFrame.from_file(provinceshpfile) 代码很简单，只要给GeoDataFrame.from_file函数传入shp文件路径即可，其得到的是一个GeoDataFrame对象

最近做一个React的简单项目，需要调用WebApi接口，调用遇到了CORS跨域问题，特此记录一下： 简单的js页面如下： import React, { Component } from 'react' ; class App extends Component{ render(){ return ( <ShoppingList name="Mark" /> ); } }; var REQUEST_URL = "https://localhost:44359/api/values" ; class ShoppingList extends React.Component { constructor(props){ super(props); this .state= { error: null , isLoaded: false , items:[] } } componentDidMount(){ fetch(REQUEST_URL, { method: "GET", // *GET, POST, PUT, DELETE, etc. mode: 'cors' // no-cors, cors, *same-origin }) .then(res => res.json()) .then( (result) => { this .setState({ isLoaded: true

近期分别使用了 React 和 Vue 完成了两个大屏可视化案例，经历了设计师和产品经理的各种 “指指点点” ，也算是对可视化大屏项目有了一点点小的经验，对于两个技术栈写组件也有一点小心得，趁着周末总结一下。 大屏效果图1 大屏效果图2 可视化大屏 无论是在科幻电影还是在真实世界里，可视化大屏都是非常常见的一种表现手法。之前在昆明公安局出差，也亲眼看到了 湄公河惨案 的真实指挥中心和他的大屏，屏幕的宽度大约有两层楼高。 可视化大屏的特性 可视化大屏， 归根到底还是运用的可视化技术 ，只不过展现的屏幕比起笔记本和显示器大了很多。相比于传统的桌面级可视化运用，大屏可视化的特性有: 屏幕巨大，用户通常离屏幕比较远，文字表达出来的信息需要足够清楚，通常要在字体和颜色上做文章。 弱化交互，基于键盘和鼠标的交互方式很少，更多时候系统自己做出响应，而不是让人工介入。 视觉冲击力强，设计一般都是以深色为底色，一来科技感十足，二来可以配合突出的主体动画和强设计感的元素。 场景化，一块大屏通常用来展示一类场景，场景主要由图表构成，后台管理系统那套表单通常不会出现在大屏。 动画更重要了，用动画表现出来的数据，通常是大屏项目中 最迷人 的地方。说动画是大屏项目的 灵魂 也不为过。案例一的那条红线被设计师称为 “画龙点睛”之笔 。 Vue和React可视化组件的实现 不作为一个整体看大屏项目

前言 vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件（electronjs）等也有广泛的应用，与此诞生的优秀的开源框架比如elementUI，iView， ant-design-vue等也极大的降低了开发者的开发成本，并极大的提高了开发效率。 笔者最初接触vue时也是使用的iview框架，亲自体会之后确实非常易用且强大。 笔者曾经有两年的vue项目经验，基于vue做过移动端项目和PC端的ERP系统，虽然平时工作中采用的是react技术栈，但平时还是会积累很多vue相关的最佳实践和做一些基于vue的开源项目，所以说总结vue的项目经验我觉得是最好的成长，也希望给今年想接触vue框架或者想从事vue工作的朋友带来一些经验和思考。 你将收获 vue框架使用注意事项和最佳经验 vue项目配置经验总结 vue组件设计经验总结 vue项目架构与服务化探索 正文 本文不仅仅是总结一些vue使用踩过的一些坑和项目经验，更多的是使用框架（vue/react）过程中的方法论和组件的设计思路，最后还会有一些个人对工程化的一些总结，希望有更多经验的朋友们可以一起交流，探索vue的奥妙。 在开始文章之前，笔者建议大家对javascript, css, html基础有一定的了解

前言 在上篇文章 《JS夯实之执行上下文与词法环境》 中提到了词法环境的创建过程，跳过了 ThisBinding 的绑定过程的陈述。而this的指向问题不管在面试或者业务工作中都是经久不衰的“坑”。 其实只要熟记四条准则，不论多么复杂的场景，你都可以正确判断出 this 的指向。 隐式绑定 关键词： . 隐式绑定发生在对象 方法调用 的时候，即通过点标识符调用对象方法。此时方法内的this就指向点 . 左边的对象： var kid = { name : '小明' , getName : function ( ) { return this .name } } kid.getName() // 小明 复制代码 这里需要注意一下 函数别名 的情况，如下： var name = '小红' var kid = { name : '小明' , getName : function ( ) { return this .name } } var fx = kid.getName fx() // 小红 复制代码 此时 fx 中 this 应该要用下文中“默认绑定”的场景来判定。 显式绑定 关键词： call apply bind call ， apply ， bind 都是 Function 原型链上的方法 —— Function.prototype.call Function

文章列表: 《一》大话 TypeScript 基本类型 《二》大话 Typescript 枚举 《三》大话 Typescript 接口 《四》大话 Typescript 泛型 《五》大话 Typescript 函数与类 《六》Typescript 最佳实践 为了更好的阅读体验, 可以看. 一年前刚接触 Typescript 的时候, 觉得它加大了代码工作量. 写一大堆东西.为了找某个类型东奔西跑, 引入第三库还经常报错. 然而现在的我想说: 真香. 我们经常吐槽别人代码可维护性特别低, 总是希望别人能够主动的写注释, 可是写注释却没有任何方式可以进行约束. 这下好了, 类型就是最好的注释, 用 Typescript, 可以大大提高代码的可维护性. 一. 如何处理第三方库类型相关问题 Typescipt 所提供的第三方库类型定义不仅约束我们的输入调用, 还能为我们提供文档. 现在, NPM 上的第三方类型定义种类繁多，很难保证类型定义是正确的. 也很难保证所有使用的第三方库都有类型定义. 那么, 在这个充满未知的过程中，如何才能正确使用TypeScript中的第三方库呢？ 下面列举了四种常见的无法正常工作的场景以及对应的解决方法： 库本身没有自带类型定义 库本身没有类型定义, 也没有相关的@type 类型声明库有误 类型声明报错 1. 库本身没有自带类型定义 查找不到相关的库类型.

一 vue的生命周期如下图所示(很清晰)初始化、编译、更新、销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset= " UTF-8 " > <title>vue生命周期</title> <script src= " ../js/vue.js " ></script> <meta name= " viewport " content= " width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no " /> </head> <body> <div class = " test " style= " border: 1px black dashed;padding: 8px; " > {{a}} </div> <div class = " test2 " style= " border: 1px red solid;margin-top: 10px;padding: 8px; " > 我是内容二 </div> <script type= " text/javascript " > var myVue = new Vue({ el: "