- 博客(67)
- 收藏
- 关注
RSS订阅
原创 Understanding ES6 -- 深入理解ES6书籍
understanding es6 – Nicholas C. Zakas块级绑定function拓展对象功能解构symbolSets and MapsIterators and Generatorsclass改进的数组promise代理和反射 – Proxy&Reflectionmodules附录A – 小的改变附录B – undestanding es7...
2019-02-16 12:10:57
691
原创 babel改变es6解构赋值
概述大家都知道ES6的解构，有时也会在解构的时候进行赋值默认值。不过不知道大家是不是注意到，有时候的赋值是不生效的。看个例子：const user = {name: 'xiaohesong', age: null, sex: ''}const {name, age = 18, sex = 'man', gf = 'lzl'} = userconsole.log(name, age, sex, gf) 大家都知道上面由于规范的原因会输出什么内容。https://developer.mozi
2020-07-01 14:00:41
1185
原创 你真的懂JavaScript吗
放在前面，本文原文的标题是 So you think you know JavaScript?在下感觉有些标题党了，不过看了下文章的链接还是很不错的。原文作者是由几个问题展开了说明。问题 1: 浏览器的console里会打印出什么?var a = 10;function foo() { console.log(a); // ?? var a = 20;}foo();...
2019-08-13 21:34:54
346
原创 JavaScript的全局变量是如何工作的
在这篇博客文章中，我们将研究JavaScript的全局变量是如何工作的。一些有趣的现象是: 脚本的作用域、所谓的全局对象 等等。作用域变量的词法作用域(lexical scope)(简称:作用域(scope))是程序中可以访问它的区域。JavaScript的作用域是静态的（它们在运行时不会改变）并且它们可以嵌套 - 例如：function func() { // (A) const fo...
2019-07-16 11:00:36
441
原创 [email protected]用于hooks的API
React-redux 7.1发版啦。因为在新的项目中用到了hooks，但是用的时候react-redux还处于alpha.x版本的状态。用不了最新的API，感觉不是很美妙。好在，这两天发布了7.1版本。现在来看看怎么用这个新的API。useSelector()const result : any = useSelector(selector : Function, equalityFn?...
2019-06-14 20:20:00
2580
2
原创 JavaScript 更快的异步(async)函数和promise
本文原文： 更快的异步功能和promiseJavaScript中的异步处理传统上以速度不快而闻名。更糟的是，调试实时JavaScript应用程序(特别是Node.js服务器)不是一件容易的事情，尤其是在异步编程方面。幸运的是，时代正在改变。本文探讨了如何在V8中优化异步函数和promis(在某种程度上，在其他JavaScript引擎中也是如此)，并描述了如何改进异步代码的调试体验。注意： ...
2019-04-18 17:26:51
802
原创 JavaScript引擎基础：优化原型
本文原文： 优化原型.md本文介绍了所有JavaScript引擎通用的一些关键基础原理 - 而不仅仅是作者(Benedikt和Mathias)所使用的V8引擎。作为JavaScript开发人员，深入了解JavaScript引擎的工作原理可以帮助你了解代码的性能特征。之前，我们讨论了JavaScript引擎如何通过使用Shapes和Inline Caches来优化对象和数组访问。本文解释了优...
2019-03-29 16:08:48
434
原创 JavaScript引擎基础：外形和内联缓存
JavaScript引擎基础：外形和内联缓存本文原文：JavaScript引擎基础：外形和内联缓存本文介绍了所有JavaScript引擎通用的一些关键基础原理 - 而不仅仅是作者(Benedikt和Mathias)所使用的V8引擎。作为JavaScript开发人员，深入了解JavaScript引擎的工作原理可以帮助你了解代码的性能特征。注意： 如果你更喜欢观看演示文稿而不是阅读文章，那么...
2019-03-28 16:31:31
589
2
原创 一份完整的useEffect指南
本文太长，谨慎阅读。本文原文：一份完整的useEffect指南原文档: A Complete Guide to useEffect你使用hooks写了一些组件。也许只是一个小的应用。你基本上是满意的。你对这个API游刃有余，并在此过程中学会了一些技巧。你甚至做了一些自定义Hook来提取重复逻辑（300行代码消失了！）并向你的同事展示了它。他们会说，“干得好”。但是有时候当你使用useE...
2019-03-26 17:00:04
17787
2
原创 React: 函数组件与类有什么不同?
原文: How Are Function Components Different from Classes?原译文: 函数组件与类有什么不同?函数组件与类有什么不同?React函数组件与React类组件有何不同？有一段时间，规范的答案是: 类可以访问更多功能（如状态）。有了Hooks，就不再是这样了。也许你听说其中一个在性能上会更好。那么是哪一个? 许多这样的benchmarks是...
2019-03-05 11:33:50
5080
3
原创 让setInterval在React-Hooks中成为声明式
Making setInterval Declarative with React Hooks原文： Making setInterval Declarative with React Hooks原译文：让setInterval在React-Hooks中为声明式如果你玩React Hooks有一些时间，你可能会遇到一个有趣的问题：使用setInterval并不会按照你的预期工作。用Ry...
2019-02-07 13:02:05
795
1
原创 react作为ui在运行
原译文：React作为ui运行原文： React as a UI RuntimeReact as a UI Runtime大多数的教程介绍React是作为一个ui库。这个是说的通的，因为React是一个UI库。这就是标语所说的！我之前写过关于创建用户界面的挑战。但是这篇文章以不同的方式谈论react — 更像是程序运行时。这篇文章不会教你任何创建用户界面的东西。 但它可能会帮助你更...
2019-02-07 13:01:03
473
原创 从头实现一个简单的React
本节是 stack reconciler程序的实现说明的集合。本文有一定的技术含量，要对React公共API以及它如何分为核心，渲染器和协调(和解，reconciler)程序有很深的理解。如果你对React代码库不是很熟悉，请首先阅读代码库概述。它还假设你了解React组件的实例和元素之间的差异。stack reconciler用于15版本和早期. 它的代码在 src/renderers...
2019-01-06 12:53:53
1673
7
原创 react-redux的浅比较解析
原文： 从源码看浅比较之前看react-redux的源码，记录了一些东西，然后前两天闲着没事看了下浅比较（之前知道浅比较，但是没有看源码，和自己想象中的浅比较基本就是那么一回事）。看react-redux源码的记录在clone下来的代码库里。如果你也在看或准备看源码，希望会对你有所帮助吧。下面是浅比较部分的代码解析：const hasOwn = Object.prototype.hasO...
2018-12-28 15:21:32
671
原创 JavaScript 什么是函数式编程
原文: Master the JavaScript Interview: What is Functional Programming?译文: 什么是函数式编程？什么是命令式？声明式 — 一起学习可以watch，欢迎star“掌握JavaScript面试”是一系列帖子，旨在帮助候选人准备他们在申请中高级JavaScript职位时可能遇到的常见问题。这些是我经常在现实面试中使用的问题。函...
2018-12-25 15:26:48
1467
原创 react的setState如何知道该做什么
原文: How Does setState Know What to Do?原译文: react的setState如何知道他要做什么译：可能看到标题的时候会想，怎么去做还不是看代码吗？react中的setState不就是负责更新状态码？于是就抱着好奇心看下去了。当你在组件中调用setState的时候，你认为让发生了什么？import React from 'react';import...
2018-12-09 17:17:14
395
翻译 React如何知道是类组件还是函数组件
原文: how-does-react-tell-a-class-from-a-function译文原文: react是如何知道组件是不是类组件考虑这个定义为函数的Greeting组件：function Greeting() { return <p>Hello</p>;}react同样支持作为一个类去定义它:class Greeting extends Re...
2018-12-03 13:20:08
2895
原创 redux的中间件applyMiddleware源码详解
原文: redux的applyMiddleware源码记得之前第一次看redux源码的时候是很懵逼的，尤其是看到applyMiddleware函数的时候，更是懵逼。当然那也是半年前的事情了，前几天把redux源码看了下，并且实现了个简单的redux功能。但是没有实现中间件。今天突然又想看看redux的中间件，就看了起来。记得半年之前是从函数声明的下一行就开始看不懂了。。。然后前段时间，看了下柯...
2018-11-29 22:21:16
448
原创 react的useMemo
英文: Understanding Memoization in JavaScript to Improve Performance中文: 了解JavaScript中的Memoization以提高性能–react的应用我们渴望提高应用程序的性能，Memoization是JavaScript中的一种技术，通过缓存结果并在下一个操作中重新使用缓存来加速查找费时的操作。在这里，我们将看到memoi...
2018-11-22 19:40:03
10351
原创 js的柯里化函数(curry)和函数组合
原文: Eric Elliott - Curry and Function Composition译文: curry和函数组合提醒： 本文略长，慎重阅读之前看到有文章说柯里化函数，大致看了下，就是高阶函数，只是名字听起来比较高大上一点，今天逛medium又发现了这个，看了下感觉还不错，有涉及到闭包，涉及到point-free style, 并不是一股脑的安利demo了事，这个得记录下。什么...
2018-11-15 08:51:06
1115
原创 ES6的Symbol竟然那么强大
之前本文发表于掘金symbol是es6出的一种类型，他也是属于原始类型的范畴(string, number, boolean, null, undefined, symbol)basiclet name = Symbol('xiaohesong')typeof name // 'symbol'let obj = {}obj[name] = 'xhs'console.log(obj[n...
2018-11-05 10:29:50
2638
2
原创 react16.7 hooks api介绍
如果你之前对于Hooks没有了解，那么你可能需要看下概述部分。你或许也可以在一些常见的问题中找到有用的信息。基本的钩子useStateuseEffectuseContext添加的钩子useReduceruseCallbackuseMemouseRefuseImperativeMethodsuseMutationEffectuseLayoutEffect...
2018-11-01 11:17:44
336
原创 react 16.7 hooks write custom 编写自己的钩子
构建自己的Hook可以将组件逻辑提取到可重用的函数中。当我们学习使用`Effect Hook时，我们从聊天应用程序中看到了这个组件，该组件显示一条消息，指示朋友是在线还是离线：import { useState, useEffect } from 'react';function FriendStatus(props) { const [isOnline, setIsOnline] =...
2018-11-01 08:50:45
644
原创 react 16.7 hooks - effect 详解
Effect Hook可以使得你在函数组件中执行一些带有副作用的方法。import { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdat...
2018-10-31 13:01:27
7792
原创 Reac16.7的State Hook
在之前的的hook 介绍里有一段代码:import { useState } from 'react';function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div...
2018-10-30 17:04:01
195
翻译 react 16.7 hook概述
之前我们介绍了使用hooks的原因，在开始介绍api之前，现在我们先来整体的预览下这些api。从上篇的介绍可以知道，Hook是向后兼容的，有react开发经验的你看起来会更顺畅。是一个快节奏的概述。如果你感到困惑，可以看下上面提到的介绍里的动机：详细说明 阅读动机以了解我们为何将Hooks引入React。State Hook看下面的例子，他是一个计数器import { useSta...
2018-10-30 14:17:02
2387
翻译 react 16.7 的 hooks
Hooks是新的功能提案，出现在v16.7.0-alpha版本中，使用Hooks可以让你在不使用类的情况下使用状态和其他的一些react功能。可在此讨论看下面代码：import { useState } from 'react';function Example() { // Declare a new state variable, which we'll call "count"...
2018-10-30 12:09:45
1746
原创 React的组件，元素和实例
React Components, Elements, and InstancesElements Describe the Tree在react中，元素(element)就是描述组件实例或DOM节点及其所需属性的普通对象。 它仅包含有关组件类型（例如，Button组件），其属性（例如，颜色）以及其中的任何子元素的信息。并且元素也不是实际的组件实例。相反，它是一种告诉React你想在屏幕上...
2018-10-29 10:50:24
291
原创 ES6 Block Binding
es5和es6的区别里，关于块级绑定是被津津乐道的。之前没有记录，今天就把它记录下来。我们知道var会有变量提升。es6的let和const可以避免这个，且会生成块级作用域。块级声明function里面块内（由{和}字符表示）let 声明function getValue(condition) { if (condition) { let value =...
2018-10-15 11:31:52
207
原创 你真的了解 ES6 Modules
什么是模块模块就是javascript文件以不同方式去加载(这个就和scripts的方式相反了，scripts是以原始的javascript工作方式加载的)。这种不同的模式很有必要，并且他们代表的语义也是不一样的：模块模式会自动运行在严格模式下，没有办法选择。模块顶层创建的变量不会共享到全局范围，仅在模块的范围内。模块的顶层的this值是undefined。模块不允许在代码中使用HTM...
2018-09-30 17:00:44
428
原创 ES6 代理和反射
此文出处简介proxyproxy可以拦截目标(target)上的非内置的对象进行操作，使用trap拦截这些操作，trap是响应特定操作的方法。reflectionreflection是通过Reflect对象表示，他提供了一些方法集，为代理proxy提供默认行为。下面是一些proxy trap和Reflect方法，每个proxy trap都有提供对应的Reflect方法,他们...
2018-09-29 10:55:26
633
原创 react-redux connect源码解读
今天看了下react-redux的源码，主要来看下connect的方法首先找到connect的入口文件。在src/index.js下找到。对应connect文件夹下的connect.js文件。大致说下源码connect流程connect.js对外暴露是通过export default createConnect(), 我们来看createConnect方法。在这里，他是在对外暴露的时候...
2018-09-19 17:08:19
1019
原创 完整详细的es6 class
原文es6 classclass基本声明在说class之前，想必大家肯定会想到constructor function. 看下面代码：function Foo(name) { this.name = name}class Bar { constructor(name){ this.name = name }}f = new Foo('xhs')...
2018-09-11 21:33:52
441
原创 webpack4搭建react, 性能优化
前几天用webpack4配置了下react,这里主要说下碰到的一些问题,细节可以看源代码。hash缓存js和css都使用了chunkhash缓存，但是出现一个问题就是，无论修改css文件或者js文件，都会导致chunkhash改变，这显然不是我们需要的。然后用mini-css-extract-plugin将css提取出来之后使用contenthash，这样对内容进行hash命名。...
2018-08-31 15:25:46
1128
原创 js执行上下文
我们通过引擎执行知道代码执行走向,但是他具体是怎么执行的呢这就要从他的执行上下文(execution context)来说起来。执行上下文执行一段代码，就会存在上下文。上下文主要分为两种:global contextfunction context看下图，比较直观可以很清楚的看到，最外层的就是全局上下文，函数里的是function context, 里面的exec...
2018-07-18 12:22:02
1010
1
原创 create-react-app使用jarvis
jarvis是一个基于webpack的dashboard.使用这个也很简单,安装下,添加这个插件就好了.不过我使用的是create-react-app生成的项目,并且未eject的. 还好社区有给出一个包去处理.react-app-rewired.安装npm i -D webpack-jarvis配置使用了这个之后,直接在配置一下就好.// config-overrid...
2018-02-28 09:12:06
482
原创 react父组件调用子组件方法
前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解. 其实今天说的这个 父组件直接调用子组件方法, 也类似. 先看代码,比较直观.import React, {Component} from 'react';export default class Parent extends Component { render() { return(...
2018-02-26 09:48:17
70941
8
原创 React setState 的一些`坑`
setState今天发现有很多文章在说setState的坑,吐槽之声也不少.其实我就碰到过一个.setState不会立即改变数据// name is ""this.setState({ name: "name"})console.log(`name is ${this.state.name}`)这段代码没有按我的预料输出name.所以如果需要获取,就需...
2018-02-09 10:50:13
5366
原创 react使用阿里云对象存储,ali-oss, antd upload to ali-oss
最近写阿里云图片上传,碰到一些小问题,在此总结一下. 项目环境: create-react-app antd node6.1.0 看了阿里云oss对象存储sdk直接采用node 的安装方式.在使用的时候碰到了问题.yield client.put('file', file.url);=> TypeError: fs.createReadStream is not...
2017-12-21 13:13:29
10156
5
原创 webpack3按需加载遇到的问题
这节主要说的是自定义webpack之关于配置按需加载遇到的问题 - AsyncComponent.jsimport React, {Component} from "react";export default function asyncComponent(importComponent) { class AsyncComponent extends Component { const
2017-11-30 16:41:09
1773
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人