react

昨天，4 月 16 日，vue 3 正式进入 beta 阶段。同日，尤大参加了 State of Vue 的线上活动，以下是他上传到 google docs 上的 slides ： State of Vue Apr 16 2020 可以 FQ 的同学可以直接看。如果不方便的话，可以继续往下看一下： vue 3 核心的进度情况 进入 Beta 阶段意味着什么？ All planned RFCs merged & implemented Focus is now on stability and library integrations 目前，所有被列入计划的 RFCs 已经实现了，接下来 Vue 团队的重点是让 Vue 3 变得更加稳定，以及让 vue 相关的第三方库支持 vue 3。 3.0 对比 2.x 有哪些重要变更？ Performance Tree-shaking support Composition API Fragment, Teleport, Suspense Better TypeScript support Custom Renderer API 主要体现在 性能 、 Tree-shaking support 、 Composition API 、 Fragment 、 TypeScript支持度 和 自定义 Render 上。 性能 Rewritten

Flow Flow的意义 Flow是faceBook开源的一个JavaScript静态类型检查工具，作用类似TypeScript，但是它不像TS那样是一门独立的语言，而是作为一个babel-plugin,借助babel的编译切入JavaScript的编码当中，同时，与ts不同的是，Flow.js的类型检查不是强制的，可以通过//@flow手动开启，意味着，你可以自由选择某个文件是否开启类型检查。 Flow真是眼前一亮，我就想，TypeScript挺好的，但或许也给人带来了一些烦恼，一旦用了TS，就意味着任何时候都要强制类型检查，我觉得，选择JavaScript还是TypeScript就变成了这样一个问题：我们手头1000元，我们到底是买一件一万元的比较喜欢的还耐用的衣服呢？还是买一件很便宜但是又不耐用的地摊货呢？（耐用指的是维护性），但Flow帮我们找到了折中方案：类型检查这东西，我们在想用和需要用的时候用，同时不想用也可以不用，就好比就是手里有1000块，那我们就刚好去买1000块钱的衣服 Flow的使用 // @flow // 数字 functionflow1(x:number){ console.log(x); } flow1( 2 ); // 字符串 functionflow2(x:string){ console.log(x); } flow2( "xxx" ); //

作为一名前端爱好者, 笔者利用空余时间研究了几个国外网站的源码,发现不管是库,还是业务代码,都会用到了一些比较有意思的API,虽然平时在工作中部分接触过,但是经过这次的研究,觉得很有必要总结一下,毕竟已经2020年了,是时候更新一下技术储备了,本文主要通过实际案例来带大家快速了解以下几个知识点: Observer 原生观察者 script标签事件深入 - 移除script标签后事件仍然能执行的原因 Proxy/Reflect 自定义事件 fileReader API Fullscreen 网页全屏 URL API的使用 Geolocation 地理位置API的使用 Notifications 浏览器原生消息通知 Battery Status 设备电量情况 我会对部分API做一些比较有意思的案例,那么开始我们的学习吧~ 1. Observer API Observer是浏览器自带的观察者,它主要提供了 Intersection , Mutation , Resize , Performance 这四类观察者, 这里笔者重点介绍 Intersection Observer . 1.1 Intersection Observer IntersectionObserver 提供了一种异步观察目标元素与其祖先元素交叉状态的方法。当一个IntersectionObserver对象被创建时

对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面 取数据时发生错误, 错误页面 数据正常 加载状态 针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等. 当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的的事时候代码也会越来越乱. 下面提供几种具有普适性的方法 if/else, 三目以及 短路运算符 这三个方法都是官方文档提到的, 这里就放到一起了, 其实这三种方案都是类似的: 在render生命周期里做相应的判断. 不过三目和短路运算符可以在jsx行内使用. if/else class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { const { status } = this.props if (status === 'loading') { return <div> 加载状态 </div> }

最近 广州.NET微软技术俱乐部 对如何编写高性能.NET程序发起了讨论。 首先是在ORM和SQL方面进行了讨论，主题当然是经久不衰的月经贴: EF性能很差. Edi.Wang专门写了一篇文章< Entity Framework 的一些性能建议 > 说明了只要正确使用EF, 性能并不差. 我自己用EF十年了, 也没有感觉到EF性能差. 我的解决方法是把EF最常见性能瓶颈,比如审计日志进行优化. 之前是异步记录日志, 最近的做法是术业有专攻, 记录日志就扔给最擅长做日志的ELK组合去做. 同时ABP的审计日志也是用EF的，在大型项目里面性能也不差，详情可以看我的另一篇文章：《 ABP大型项目实战(2) - 调试与排错 - 日志 - 查看审计日志 》。这可是既有大量数据又有多表关联查询哦。 可见, .NET性能并不差, 而且随着.NET的不断进步, 优化门槛越来越低, 只要你找到获取这类知识的渠道,花点时间, 很快就可以编写出高性能的.NET程序. 然后又说到FP(函数式编程). FP(函数式编程)是一种和OOP(面向对象编程)不一样的编程方式. 对于OOP(面向对象编程), 绝大多数人都知道. 然而对于FP(函数式编程), .NET俱乐部里的绝大多数人并没有感觉, 因为感觉日常没有用到啊, 而且FP类编程语言Erlang和Go距离我们.NET程序员太远了. 其实

Vue 双向绑定原理 mvvm 双向绑定，采用 数据劫持结合发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 几个要点： 1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图 4、mvvm 入口函数，整合以上三者 具体步骤： 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化 compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: 在自身实例化时往属性订阅器(dep

当组件第一次渲染的时候执行哪些生命周期？ constructor--->componentWillMount--->render--->componentDidMount 1.constructor 初始化 当前生命值周期可以定义当前组件所需要的状态 当前生命周期函数必须写super，否则就会报错或者this的指向发生改变 如果在super和constructor中没有传递props这个参数的话是访问不到this.props属性的 2.componentWillMount 组件挂载前 在当前生命周期函数里可以访问到props属性，在这里可以接收外部属性，同时可以将外部属性转变成内部属性 在当前生命周期函数里不需要调用setState,因为当前函数执行完毕后会自动执行render 3.render a.render函数什么时候会执行？ 当this.state,this.props发生改变的时候，会执行render函数 b.this.state/this.props发生改变的时候会执行哪些生命周期函数 　　this.state: 　　　　shouldComponentUpdate--->componentWillUpdate--->render--->componentDidUpdate 　　this.props 　　　　componentWillReveiceProps---

server { listen 8080 ; # server_name your.domain.com; root /home/root/react-demo/ dist; index index.html index.htm; location / { try_files $uri $uri / / index.html; } location ^~ /assets/ { gzip_static on; expires max; add_header Cache -Control public ; } error_page 500 502 503 504 / 500 .html; client_max_body_size 20M; keepalive_timeout 10 ; } 来源： oschina 链接： https://my.oschina.net/u/4344137/blog/3269950

概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表格操作信息(蓝色框内) 概述 如果用 react 开发前端, 建议基于 antd pro 来开发, antd pro 是 antd 的增强版, antd 是组件库, antd pro 则是前端框架, 基于 antd pro, 创建工程时不用再考虑: 路由的设置, 以及和菜单的联动 面包屑和路由的联动 发布打包的方法 工程 lint 后端 API 访问方式 页面状态的管理 … … 总之, 对于管理类型的应用, 基于 antd pro, 可以更多的关注自己的业务, 而不用在工程的管理上花费多余的时间. 在 antd pro 的官网上, 有它的使用方式, 这里主要介绍 antd pro 中的一个组件 antd pro table 的使用 antd pro table antd pro 中的大部分组件来自于 antd , 而 antd pro table 则是基于 antd 的 table 组件再封装了一层, 熟练使用 antd pro table, 能够覆盖大部分增删改查业务的需要, 关键是只需要极少的配置, 就能得到一个完善的表格. antd pro table 的主要部分 如下图:

无论是app还是小程序或者其他端，交互中请求无处不在。 一个优秀的封装类，能让你的开发效率事半功倍，所以封装逻辑至关重要，当然我也是个小菜鸟，跟着自己的思路写过一些封装方法，一方面是想不足之处还望路过的大神给予指正，二者是为新手打开一个善于封装思维的大门，下面进入到前置知识。 Api： cnodejs.org/api/v1 Ts： 简易的类型声明、接口等 Es6：结构赋值、扩展运算、promise、export等 Taro：类react，以及小程序基础知识等 1.梳理Taro的请求 Taro.request，实现最简易的请求方法 import Taro from '@tarojs/taro' //回调调用 function doRequestAction (){ Taro.request({ url: '' , data: {}, header: {}, success: res => {}, fail: err => {}, complete: info => {} }) } // promise调用 function doRequestAction (){ Taro.request({ url: '' , data: {}, header: {} }) .then(res=>{}) .catch(err=>{}) .finally(()=>{}) } 复制代码