- 博客(16)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 原型模式
使用构造函数的主要问题，就是每个方法都要在每个实例中重新创建一遍。function Animal () { this.sayName = function () { console.log('动物') }}let dog = new Animal()let cat = new Animal()每个函数都有一个 prototype （原型）属性，这个属性是一个指针，指向...
2019-08-31 21:06:28
306
原创 设计模式之状态模式
状态模式是一种非同寻常的优秀模式，它也许是解决某些需求场景的最好方法。虽然状态模式并不是一种简单到一目了然的模式，但你一旦明白了状态模式的精髓，以后一定会感谢它带给你的无与伦比的好处。状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。我们来想象一个场景，路口的红绿灯。它有三种状态，可以不断的轮询切换。根据这个交通规则，我们通过代码的形式来描述。class Lig...
2019-08-31 11:46:34
269
原创 node中events实现原理
events称为事件触发器，on() 用于注册监听器， emit() 用于触发事件。用例如下：const EventEmitter = require('events');class MyEmitter extends EventEmitter {}const myEmitter = new MyEmitter();myEmitter.on('event', () => { ...
2019-08-30 15:09:00
572
原创 设计模式之代理模式
代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。比如我们想要访问Google服务器，但是在中国不能直接访问，需要配置一个单例服务器访问。class Google { get() { return 'google' }}// 通过代理访问googleclass Proxy { constructor () { this.google = new...
2019-08-27 22:41:05
203
原创 useImperativeHandle的使用
你不能在函数组件上使用 ref 属性，因为它们没有实例：import React, { Component } from 'react';function MyFunctionComponent() { return <input />}class Parent extends React.Component { constructor(props) { s...
2019-08-26 15:46:57
6873
1
原创 设计模式之适配器模式
适配器模式的作用是解决兼容问题的。在使用Vue的时候通常使用computed计算属性去处理数据然后再显示到页面中。<body> <div id="root"> <p>{{ name }}</p> <p>{{ upperName }}</p> </div> <script>...
2019-08-25 12:04:43
248
原创 设计模式之单例模式
什么是单例模式？只有一个实例（如在浏览器中只有一个window对象）class Window { constructor (name) { this.name = name; } static getInstance () { if (!this.instance) { this.instance = new Window() } ret...
2019-08-24 22:29:27
130
原创 useEffect使用的介绍
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。实现一个 componentDidMount 的功能function Demo () { useEffect(() => { consol...
2019-08-23 18:27:05
5034
原创 useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值
只在更新时运行 effect这是个比较罕见的使用场景。如果你需要的话，你可以 使用一个可变的 ref 手动存储一个布尔值来表示是首次渲染还是后续渲染，然后在你的 effect 中检查这个标识。（如果你发现自己经常在这么做，你可以为之创建一个自定义 Hook。）function Example () { const [count, setCount] = useState(0); co...
2019-08-23 14:30:18
25437
原创 理解中间件的next怎样调用
app.use((ctx, next) => { console.log(1); next() console.log(2)})app.use((ctx, next) => { console.log(3); next() console.log(4)})app.use((ctx, next) => { console.log(5); ne...
2019-08-20 19:48:19
2328
转载 react生命周期
React生命周期分为3个阶段：挂载，更新，卸载挂载当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()static getDerivedStateFromProps()render()componentDidMount()更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：static get...
2019-08-20 13:08:05
103
原创 vue和react中props变化后修改state
如果只想在 state 更改时重新计算某些数据，比如搜索框案例。vue<template> <div> <input type="text" v-model="filterText"> <ul> <li v-for="item in filteredList" :key="item.id"> ...
2019-08-17 13:25:59
1459
原创 vue使用slot分发内容与react使用prop分发内容
vue将 <slot> 元素作为承载分发内容的出口// layout.vue<div class="container"> <main> <slot></slot> </main></div>当组件渲染的时候，<slot></slot> 将会被替换该组件起始标签和...
2019-08-16 14:38:49
743
原创 使用React.Suspense显示loading效果
React.lazy()需要和<React.Suspense>配合使用React.lazy()需要和import()动态引入语法配合使用不能在服务端渲染使用在组件没有加载出来的时候显示loading效果，加载完成之后正常显示。import React from 'react';const OtherComponent = React.lazy(() => impo...
2019-08-15 10:37:18
3953
原创 wepack中loader的分类
loader种类loader分为四类分别是：前置 pre行内 inline普通 normal后置 postRule.enforceenforce 属性会影响 loader 种类。不论是普通的，前置的，后置的 loader。可能的值有："pre" | "post"module: { rules: [ { test: /\.less$/, ...
2019-08-11 11:14:54
881
原创 理解JavaScript的闭包
基本概念执行环境（execution context，为简单起见，有时也称为“环境”）是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。全局执行...
2019-08-08 13:30:08
551
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人