11 2019 档案
摘要：1、memo react 16.6 推出的 api ，他的用意是给 function component 也有 PureComponent 这样一个类似的功能，因为我们知道 PureComponent 提供了 class component 的组件类型，在 props 没有变化的情况下，他可以不重新
阅读全文
摘要：children是什么意思呢？就是我们拿到组件内部的props的时候，有props.children这么一个属性，大部分情况下，我们直接把 props.children 渲染到 JSX 里面就可以了。很少有情况我们需要去操作这个 children 。 但是如果一旦你需要去操作这个 children
阅读全文
摘要：我们先初步了解下 hooks，使用 useState 和 useEffect。 /** * 必须要react和react-dom 16.7以上 */ import React, { useState, useEffect } from 'react' export default () => { c
阅读全文
摘要：React 16.6 提供的一个新的开放一部分功能的 Suspense 代码 import React, { Suspense, lazy } from 'react' const LazyComp = lazy(() => import('./lazy.js')) let data = '' le
阅读全文
摘要：我们知道在react当中，组件与组件的沟通是通过props，父组件通过props给子组件传递一些属性，父组件可以传递一些回调函数给子组件，让子组件在某些特定的时候，可以调用父组件的一些特性。 但是我们会存在一个问题就是，react 的应用当中，组件和组件之间并不一定只有父子关系。他们还会存在着父子嵌
阅读全文
摘要：ref 的功能，在 react 当中。我们写了一个组件，在这个时候，我们的 render function 里面我们会渲染一系列的子组件或者 dom 节点，有时候我们会希望有这样的需求，就是我们要获取某个 dom 节点，或者是某个子组件的实例。去对他进行一些手动的操作，而不仅仅是 props 更新这
阅读全文
摘要：给定一个仅包含 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射（如图）。注意1不对应任何字母 输入：'23' 输出：['ad', 'ae', 'af', 'bd', 'be', 'bf', 'cd', 'ce', 'cf'] 规律：2 个一算，拼成 1 个，继续和下一个一算，拼成
阅读全文
摘要：给定一个字符串 s ,计算具有相同数量 0 和 1 的非空（连续）子字符串的数量，并且这些子字符串中的所有 0 和所有 1 都是组合在一起的。要计算重复出现的子串的次数 输入：'00110011' 输出：6 解释：有6个子串具有相同数量的连续 1 和 0：‘0011’，‘01’，‘1100’，‘10
阅读全文
摘要：React中最重要的就是组件，写的更多的组件都是继承至 React.Component 。大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能。他帮助我们去运行了这个 render function 。然后最终把我们写在里面的 dom 标签或者子组件之类的
阅读全文
摘要：题目：给定一个字符串，你需要反转字符串中每个单词的字符顺序，同时仍保留空格和单词的初始顺序 输入： 'let's take leetcode contest' 输出： 's'tel ekat edocteel tsetnoc' 注意：在字符串中，每个单词由单个空格分隔，并且字符串中不会有任何额外的空
阅读全文
摘要：我们的JSX里面标签，属性，内容都会传递到React.createElement()这个方法里面。那么这个方法他到底有什么意义以及他的返回，我们叫他ReactElement。他到底有什么样的作用 /** * Copyright (c) Facebook, Inc. and its affiliate
阅读全文
摘要：中介者模式 如图，左边的这种相互的沟通会非常出杂乱，复杂。严重不符合开放封闭原则，其中一个对象改了，就牵扯到很多的对象。右边的，如果一个对象改了，只要改中介者就行 举个例子：比如买房子，a，b分别是买房子和卖房子的两个人 // 中介者 class Mediator { constructor(a,
阅读全文
摘要：备忘录模式：随时记录一个对象的状态变化，随时可以恢复之前的某个状态（如撤销功能） // 状态备忘 class Memento { constructor(content) { this.content = content; } getContent() { return this.content;
阅读全文
摘要：命令模式：执行命令时，发布者和执行者分开（比如老板和服务员，老板说谁谁谁去干什么，然后服务员就去干了，这适合人比较少，一吆喝就都知道了。如果是上千人，这样就不合适了，这个时候需要发布者和执行者分开）。中间加入命令对象，作为中转站。 比如战争片中，将军传递命令 class Receiver { exe
阅读全文
摘要：class Action { handle() { handle1(); handle2(); handle3(); } handle1() { console.log('1'); } handle2() { console.log('2'); } handle3() { console.log('
阅读全文
摘要：策略模式：不同策略分开处理，避免出现大量 if...else 或者 switch...case class User { constructor(type) { this.type = type; } buy() { if (this.type 'ordinary') { console.log('
阅读全文
摘要：状态模式：一个对象有状态变化，每次状态变化都会触发一个逻辑，不能总是用if...else来控制 比如红绿灯 uml类图 代码 // 状态（红灯，绿灯 黄灯） class State { constructor(color) { this.color = color; } // 设置状态 handle
阅读全文
摘要：迭代器模式：顺序访问一个集合（顺序访问就要求是有序的）。使用者无需知道集合的内部结构（封装） <body> <div id="div1"> <p>jquery each</p> <p>jquery each</p> <p>jquery each</p> </div> <script> var arr
阅读全文
摘要：在写react代码的时候，大部分同学应该都是写JSX。因为相比于写纯JavaScript。写JSX为我们去写组件，比写一些在JavaScript当中写类似于html结构的这种代码是要方便非常非常多的，他的可阅读性，可维护性都要高很多的。那么JSX他的魔力在哪里，能够让我们在JS里面写html代码。
阅读全文
摘要：git源码地址：https://github.com/facebook/react react 里面就是 react源码 react里面的react文件夹就是react源码，react源码非常的少，总共不到100行，ReactBaseClasses也就一百多行，react和react-dom加起来有
阅读全文
摘要：1、我又不写框架，为什么要学习源码 首先，如果你是react的使用者，从业务能力来说，学习源码毫无疑问会给你带来很大的提升，他能帮助你更好的理解，你写的代码是如何运行的，能在你遇到bug的时候，让你从底层去思考如何去解决问题，并且让你在开始项目之前，就想好更好的架构方式。 其次，react很多设计细
阅读全文
摘要：装饰器模式：为对象添加新功能，不改变其原有的结构和功能 适配器模式是原有的不能用了，要重新封装接口。装饰器模式是原有的还能用，但是需要新增一些东西来完善这个功能 比如手机壳，手机本身的功能不受影响，手机壳就是手机的装饰器模式 uml类图 代码 class Circle { draw() { cons
阅读全文
摘要：适配器模式：旧接口格式和使用者不兼容，中间加一个适配转换接口 比如国外的插座跟国内的插座不一样，我们需要买个转换器去兼容。 uml类图 代码 class Adaptee { specificRequest() { return '德国标准的插头'; } } class Target { constr
阅读全文