- 博客(15)
- 收藏
- 关注
RSS订阅原创 前端基础进阶（四）：作用域与作用域链
文章最新内容已迁移至公众号 不知非攻，后续维护也在公众号里修正，欢迎关注。作用域与作用域链本应该是一个非常简单的概念。可是在近两年多的留言中，我发现这些概念反而成为了大多数人想不明白的点，而感到困惑的原因在于，别的文章里，常常会提到词法作用域，词法分析等概念，到底是什么东西？好像跟我说的有一点不一样，但又不知道哪里不对？为了避免接下来更多的同学造成同样的困扰，我写了一篇名为（v8引擎是如...
2019-12-02 14:43:13
449
原创 前端基础进阶（三）：变量对象详解
文章最新内容已迁移至公众号 不知非攻，后续维护也在公众号里修正，欢迎关注。在JavaScript中，肯定不可避免的需要声明变量和函数，JS编译器是如何找到这些变量的呢？我们还得对执行上下文有一个进一步的了解。在上一篇文章中已经知道，当调用一个函数时（激活），一个新的执行上下文就会被创建。一个执行上下文的生命周期可以分为两个阶段。创建阶段在这个阶段中，执行上下文会分别创建变量对象...
2019-12-02 14:41:39
281
原创 前端基础进阶（二）：执行上下文详细图解
本系列最新文章已迁移至公众号 不知非攻，欢迎关注跟进我们在JS学习初期，或者在面试的时候常常会遇到变量提升相关的思考题。比如先来一个简单一点的。console.log(a); // 这里会打印出什么？var a = 20;暂时先不管这个例子，我们先引入一个JavaScript中最基础，但同时也是最重要的概念：执行上下文（Execution Context）每次当控制器转到可...
2019-12-02 14:40:50
333
原创 前端基础进阶（一）：内存空间详细图解
文章最新内容已迁移至公众号 不知非攻，后续维护也在公众号里修正，欢迎关注。var a = 20;var b = 'abc';var c = true;var d = { m: 20 }因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，...
2019-12-02 14:38:38
293
原创 超性感的React Hooks（十一）useCallback、useMemo
在实践开发中，有一种优化手段叫做记忆函数。什么是记忆函数？用一个例子来说明。我们想要计算从1到某个整数的总和。封装一个方法来实现这个目的。function summation(target: number) { let sum = 0; for(let i = 1; i <= target; i++) { sum += i; } return sum;}验...
2019-12-02 14:21:46
3945
原创 超性感的React Hooks（十）useRef
import {useRef} from 'react';在函数式组件中，useRef 是一个返回可变引用对象的函数。该对象.current属性的初始值为useRef传入的参数initialVale。返回的对象将在组件整个生命周期中持续存在。const ref = useRef(initialValue);通常情况下，useRef有两种用途，访问DOM节点，或者React元素保持...
2019-12-02 14:21:09
2750
原创 超性感的React Hooks（九）useContext实践
如上图所示。我们利用useContext来实现这个小demo。在实现之前，复习一下相关比较重要的知识点。如下图。1如何合理的拆分组件？这是一个需要在实践中，不断去总结，优化才能获得的技能。首先，将一个复杂的页面逻辑进行拆分的目的，一定是为了可读性和可维护性。如果你的组件拆分违背了这两个原则，那么拆分就有问题。本来我想根据我自己的经验，将组件分为基础组件，工具组件，容器组件，页面组...
2019-12-02 14:20:16
706
原创 超性感的React Hooks（八）useContext
在context这个高级API出来之前，数据流向只能自上而下，从父组件一层一层的往下传递。如上图左。如果仅仅只支持这样的方式，在实践中会遇到很多麻烦。例如一个数据要传到使用它的组件，中间还要经历3个组件。我们就不得不在这三个中间组件中处理该数据的传递逻辑。但其实对于这三个组件而言，该数据毫无用处。context的出现，就是为了解决这样的痛点。context能够让数据直达需要它的那一个子组件...
2019-12-02 14:19:26
589
原创 超性感的React Hooks（七）useReducer
useReducer是React hooks提供的API之一，它和redux的使用几乎一样。因此如果你熟悉redux，那么自然就已经知道如何去使用useReducer了。1我用最简单的递增递减的案例，来和大家分享一下它的用法。最终实现效果如图。首先从React中引入import React, { useReducer } from ‘react’;然后需要定义一个状态值，以表示us...
2019-12-02 14:18:38
1317
原创 超性感的React Hooks（六）自定义hooks的思维方式
今天Spenser在公众号里说，今年许多公司都在裁员。市场上供大于求，但是，好多企业还是招不到人。真正的人才，市面上太稀缺了。这句话真的深有体会。我们公司想要招一个Java的高级开发，招了一个多月都没找到满意的。真的痛苦。出现这种局面，两极分化就会日渐严重。就以前端行业来看，厉害的人，会越来越难找，也会越来越值钱。而普通的人，混口饭吃都不容易。还是那句话说得对，外面的世界很精彩，可精彩是属于真...
2019-12-02 14:17:47
1595
2
原创 超性感的React Hooks（五）：自定义hooks
1在实践中，我们常常会遇到逻辑相同的功能片段。对于这样的场景，更省力的方式是，将这些功能片段封装成为一个单独函数来使用。例如，比较两个数组是否相等，可以封装一个equal方法，来处理这个通用逻辑。export default function equalArr(a: number[], b: number[]) { if (a.length !== b.length) { ret...
2019-12-02 14:16:55
2362
1
原创 超性感的React Hooks（四）：useEffect
1想不想验证一下自己的React底子到底怎么样？或者验证一下自己的学习能力？这里有一段介绍useEffect的文字，如果你能够从中领悟到useEffect的用法，那么恭喜你，你应该大概率是个天赋型选手。那么试试看：在function组件中，每当DOM完成一次渲染，都会有对应的副作用执行，useEffect用于提供自定义的执行内容，它的第一个参数（作为函数传入）就是自定义的执行内容。为了避...
2019-12-02 14:15:51
1540
原创 超性感的React Hooks（三）：useState
这几天和许多同学聊了使用React Hooks的感受。总体感觉是，学会使用并不算难，但能用好却并不简单。索性拉了一个React Hooks的讨论群，抽空时间在群里纠正大家的使用方式。如果持续关注群消息，能够学到许多正确的使用方式。感兴趣的同学速度进群，如果提示满人，公众号回复React Hooks获取进群方式。后进群的不用担心，每天的讨论的内容，我都会记录在语雀讨论组中，任何时候进群都能...
2019-12-02 14:14:52
866
2
原创 超性感的React Hooks（二）再谈闭包
如果你一天没有真正理解它，你就应该继续学习它。曾经我去找工作面试的时候，我最讨厌别人问我闭包，因为我说不清楚。现在我面试别人了，却又最爱问闭包，因为闭包真的能直接的检验你对JS的理解深度。可能够回答上来的人真的很少。两年以来我面试过估计200多人，其中技术能力最强的是阿里P6的一个胖胖的哥们儿，这里简称PP。PP的JS基础很扎实，对React的理解比较深刻，其他问题上我们聊得很开心。可即使是...
2019-12-02 14:12:30
3254
3
原创 超性感的React Hooks（一）：为何她独具魅力
正如标题所示，我准备写一系列文章介绍React Hooks。过去大半年里，我将React Hooks应用到了许多大型项目，其中5个全新重构，其他项目由于时间关系少量使用。这些项目包括React Native基于ant-design-pro重构的中后台应用基于React，专注于小程序开发的Taro应用以create-react-app为基础，自主构建的web应用基于beidou框架...
2019-12-02 10:52:52
803
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人