摘要:
定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。 其主要原理是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象内部状态变化时, 会带来不同的行为变化。 1. 状态模式类实现方式 // 状态类 class OffLightState { constructor( 阅读全文
摘要:
React-Router帮助我们实现单页应用的路由跳转功能 1. 简单路由 src/pags/home.js const Home = () => { return ( <div>Home</div> ); }; src/Routes.js import React from 'react'; im 阅读全文
摘要:
定义:迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也 可以顺序访问其中的每个元素。 1. 内部迭代器 内部迭代器在调用的时候非常方便,外界不用关心迭代器的 阅读全文
摘要:
定义: 定义一系列的算法,把它们一个个封装起来,并且使他们可以相互替换。 实现方案一:将算法集中在对象中进行管理,利用对象的key值选取需要的算法 // 定义策略对象的一系列算法 const strategies = { "S": salary => salary * 4, "A": salary 阅读全文
摘要:
Refs为我们提供了一种方式访问Dom节点或者React实例,下面是使用Refs的几个场景 管理焦点,文本选择或媒体播放 触发强制动画 集成第三方 DOM 库 1. 创建和访问Refs 创建Refs Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 阅读全文
摘要:
1. Render Prop 具有 render prop 的组件接受一个返回 React元素的函数,并在组件内部通过调用此函数来 实现自己的渲染逻辑, 具体来说render prop 是一个用于告知组件需要渲染什么内容的函数 prop。 <DataProvider render={data => 阅读全文
摘要:
1. 创建Redux store app/store.js import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: {} }) 2. 将store提供给React index 阅读全文
摘要:
1. store enhancer Store Enhancer基本结构 Store Enhancer是一个函数,这个函数可以接受一个createStore模样的函数为参数,返回一个新的createStore函数。它的主要目的是改变和加强store的接口方法。 const doNothingEnha 阅读全文
摘要:
1. 什么是Redux Redux是一个通过叫做action的事件,管理和更新应用程序状态的js库或者说是一种模式。使用Redux 可以使我们更容易地理解应用程序中的状态或者说数据何时,何地,为什么被更新,以及这种更新所 带来的行为。 2. 使用Redux的场景 应用程序中具有大量的数据状态分布在程 阅读全文
摘要:
1. 迭代器(Iterator) 特殊对象,具有迭代过程的接口next()方法 每次调用next()方法,返回一个结果对象 结果对象有两个属性value(任何类型)和done(布尔类型) 当集合的值返回完时,再次调用next()方法,结果对象的done属性值为true,value为迭代器最终返回的值 阅读全文