- 博客(23)
- 收藏
- 关注
RSS订阅转载 React Hooks和TypeScript完全指南
引言React v16.8 引入了 Hooks，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用，从而易于共享逻辑。Hook 令人兴奋并迅速被采用，React 团队甚至想象它们最终将替换类组件。以前在 React 中，共享逻辑的方法是通过高阶组件和 props 渲染。Hooks 提供了一种更简单方便的方法来重...
2020-01-21 14:10:03
6208
2
原创 React 生命周期
前言原本我以为对 React 生命周期已经熟的不能再熟了，直到前几天实现一个功能时，就因为没有吃透 React 生命周期，把我坑的不要不要的，所以痛定思痛，重新学习一遍 React 生命周期旧版生命周期初始化的时候不会把赋值算作更新，所以不会执行更新阶段import React, { Component } from 'react'export defa...
2020-01-21 11:53:29
486
转载 关于webpack问答记录...
Question谈谈你对webpack的看法webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。webpack的基本功...
2020-01-21 09:09:34
327
转载 React Hooks 一步到位
useState用来声明状态变量。import React, { useState } from 'react';// ...const [ count , setCount ] = useState(0);// ...count 声明的变量 setCount 设用来更新变量的函数 0 初始值 多个状态声明不能出现在条件判断语句中useEffect用来代替生命周期函...
2020-01-20 09:33:37
294
转载 React DnD
简介最近在研究用React绘制拓扑图的时候涉及到了HTML5拖放API，了解到了React DnD这个拖放神器。React DnD帮我们封装了一系列的拖放API，大大简化了拖放API的使用方式，今天就结合下面这个示例给大家介绍下React DnD的用法。重要概念React Dnd提供了几个重要的API供我们使用：DragSource DropTar...
2020-01-20 09:19:17
1510
转载 React Native 性能优化指南
2020 年谈 React Native，在日新月异的前端圈，可能算比较另类了。文章动笔之前我也犹豫过，但是想到写技术文章又不是赶时髦，啥新潮写啥，所以还是动笔写了这篇 React Native 性能优化的文章。本文谈到的 React Native 性能优化，还没到修改 React Native 源码那种地步，所以通用性很强，对大部分 RN 开发者来说都用得着。本文的内容，一部分是 Rea...
2020-01-14 20:53:36
1943
1
原创 nvm 和 nrm 的安装与使用
本文介绍了如何使用 nvm 切换 node 和 npm 版本，以及如何使用 nrm 切换 npm 下载源。一、NVMNvm 可以切换 node 与 npm 版本，在开发不同项目时，可能会用到不同的 node 与 npm 版本，所以使用 nvm 可以方便的在不同 node 与 npm 版本之间进行切换。写在前面在安装 Nvm 之前，先将之前安装的 node 进行卸载。否则可能会出现无...
2020-01-06 09:19:11
1026
转载 教你发布你npm包
前言npm(Node Package Manager)，一个Node的包管理器，平时我们常用的公共模块（插件）或者叫做包大多都放在上面，所以接下来要封装的插件，我们就简单称它为npm包，本文从就从这个简单的例子开始，逐步对它进行封装-发布-更新-扩展-使用，进而到得一个相对完整的npm包，下面开始。一、一个最简单的npm包1.1 新建文件夹可以找个地方直接建个文件夹，最好语义化一点...
2020-01-05 15:34:52
947
转载 React16常用api解析以及原理剖析
React16常用api解析以及原理剖析目录Vue 与 React 两个框架的粗略区别对比 react 16 版本常见 api react 生命周期 react 事件机制 react.Component 如何实现组件化以及高阶组件的应用 setState 异步队列数据管理 react Fiber 架构分析 react hooks dom 的 diff 算法 snabbdo...
2020-01-05 13:32:09
923
转载 React Hooks 完全指南
阅读 facebook大佬：Dan Abramov 的文章颇有感悟大佬 github地址https://github.com/gaearon重点总结useEffect是同步的 状态是捕获的当前props和state 可以通过useRef获取改变后的props和state 依赖项[]不能欺骗 复杂的状态变化应该使用useReducer 可以使用use...
2020-01-05 09:56:22
634
转载 Koa2教程（常用中间件篇）
目录一、koa-bodyparser二、koa-router三、koa-views + ejs四、koa-static五、koa-session六、koa-jwt七、koa-helmet八、koa-compress九、koa-logger十、koa-convert十一、koa-compose十二、koa-http-request十三、koa-conditional-get十四、koa-csrf十...
2020-01-04 19:23:40
1749
转载 实践这一次,彻底搞懂浏览器缓存机制
前言[实践系列] 主要是让我们通过实践去加深对一些原理的理解。[实践系列]前端路由[实践系列]Babel原理[实践系列]Promises/A+规范有兴趣的同学可以关注 [实践系列] 。 求star求follow~如果觉得自己已经掌握浏览器缓存机制知识的同学,可以直接看实践部分哈~目录 1. DNS 缓存 // 虽说跟标题关系不大,了解一下也不错 2. CDN...
2020-01-03 11:30:30
464
转载 ReactNaive分包方法
ReactNaive分包方法RN中，发布js代码时，会打包成jsbundle形式。随着业务的增大，jsbundle体积也会逐渐增大，特别是多Module场景下，会生成多个jsbundle（包含相同的基础）。不仅增加APP、热更新包体积，也对jsbundle的加载效率造成很大影响。针对jsbundle的拆包，成为集成RN必须考虑的问题。拆包目的解决jsbundle体积过大 按需分步加载...
2020-01-03 09:39:49
1466
转载 前端收集
Latest2019 前端两年半回顾：深挖洞，广积粮Framework Next.js 生命周期理解 -> 流程图 理解后端渲染、CSR(客户端渲染)、SSR（服务端渲染）的核心原理及区别 Build a react+react-router ssr App from the ground up SPA路由原理+build your own reac...
2020-01-02 14:07:06
169
转载 React Native 源码学习方法及其他资源
此文是我的出版书籍《React Native 精解与实战》连载分享，此书由机械工业出版社出版，书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战，以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示，精选了大量实例代码，方便读者快速学习。书籍配套视频教程「80 节实战课精通 R...
2020-01-02 12:49:20
213
转载 React Native 底层原理
此文是我的出版书籍《React Native 精解与实战》连载分享，此书由机械工业出版社出版，书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战，以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示，精选了大量实例代码，方便读者快速学习。书籍还配套了视频教程「80 节实战课精通...
2020-01-02 12:44:08
378
转载 携程是如何做React Native优化的
React Native(下文简称RN)开源已经一年多时间，国内各大互联网公司都在使用，携程也在今年5月份投入资源开始引入，并推广给多个业务团队使用，本文将会分享我们遇到的一些问题以及我们的优化方案。一、背景和使用情况介绍为什么会引入React Native?1. AppSize占用携程旅行App从11年开始开发，至今已有5年多时间，随着各项业务功能的全面移动化，以及公司mobile ...
2020-01-02 12:43:32
365
转载 React native 拆包
拆包是React-Native项目不得不面临的一个重要技术门槛。图片来自网络为什么要拆包？bundle文件过大： 一个Helloworld的App，如果使用0.53RN 官方命令react-native bundle打包出来的JSBundle文件大小大约为530KB，RN依赖模块本身占了99.9%。页面加载慢： 如果使用热更新，从网络获取整个包的下载时间很长，每次进入RN...
2020-01-02 11:35:45
496
转载 immer来代替immutable优化你的React项目
不可变数据React的老手们早就知道为什么要用不可变数据了，但是为了防止新手们看不懂，所以还是要解释一下什么是不可变数据，不可变数据指的其实就是当你修改一个数据的时候，这个数据会给你返回一个新的引用，而自己的引用保持不变，有点像是经常用到的数组的map方法：const arr1 = [1, 2, 3];const arr2 = arr1.map(item => item * 10...
2020-01-02 11:29:44
2496
转载 reactNative性能优化
本文将简单介绍一下我所收集到的React Native应用优化方法，希望对你有所启发。很多方法也是适用React web应用的。包体积优化无论是热更新方案走网络下载js，还是直接将js打进apk,减小js bundle体积都很必要。走网络的js体积大影响首次加载速度，打进apk的增加包体积。压缩为了测试，直接使用react-native init命令生成了一个rn工程，将其中的A...
2020-01-02 11:23:12
528
转载 React Native之阴影效果
前言阴影效果在App中是一个很常见的需求，在css3中可有直接通过box-shadow属性实现，RN中的iOS端也可以通过下面类似的代码实现 //只支持iOS端 shadowColor: '#999', //设置阴影色 shadowOffset:{width:0,height:0}, //设置阴影偏移,该值会设置整个阴影的偏移，width可以看做x,height...
2020-01-02 11:18:55
4054
转载 从实现讲解vue的原理
首先我们上一张图由图可知,MVVM是由两大块构成，Observer劫持监听响应式 以及 Compile指令解析。 下面我们就从这两方面来组合实现Vue。响应式Observer的实现class Vue { constructor(options) { this.$options = options this.$data = o...
2020-01-02 11:09:12
370
转载 一套完整的vue项目开发环境
不管是工作需要还是面试加分，vue技术栈已经成为了前端开发工程师必备的技术点。接下来，我将从零开发一套完整的vue项目开发环境，提供给需要的同行小伙伴观看也方便自己以后复习。最美的自己仓库地址项目源码地址：github.com/tangmengche…目标彻底 Vue 官方脚手架 Cli 帮我们初始化做了那些事，通过 webpack4.x 帮我们完成了哪些常见...
2020-01-02 09:32:18
1211
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人