typescript mock数据apits-node tsc指令（typescript compile）编译并执行ts文件npm install -g typescript ts-nodetsc --help // 查看指令cnpm install axios -Stsc index.tsts-node index.ts
【工程师综合项目二】React + Koa2打造『JS++官网管理后台』 Redis认知、安装与操作MongoDB：动态数据库，如游戏中需要频繁地保存人物的坐标Oracle：收费，企业级mac要安装homebrew（包管理工具）window安装Redis程序运行教程命令行Redis操作启动： redis-server 启动Redis服务器连接客户端： redis-cli 操作Redisport: 6379设置或修改Reids： set name ‘js++’获取Redis： get nam
前端面试之Vue相关总结 Vue2中检测数组变化的限制和解决方法vue2用下标设置数组没效果arr = [1,2] arr[0] = 0,页面上显示的arr并没有修改(如果对应下标是原始值；若是引用值)解决1：Vue.Set解决2：arr.splice (Vue会劫持splice方法) Vue2对对象是循环defineProperty（递归、深度）set时通知dep.notify()；对于数组则是重写数组7个方法（push、pop、shift、unshift、splice、sort、reverse）时通知dep.notif
7 useLayoutEffect、useDebugValue useEffect：dom完成渲染后执行不传参数，每次都会执行传空的依赖[]，只会执行一次有依赖，依赖项变化会执行useEffect实现动画效果import { useEffect, useRef, useState } from "react"const App = () => { const [, setCount] = useState({}) const refDiv = useRef() useEffect(() => { .
6 useRef、useImperativeHandle useRef在每次执行时返回的是同一个引用（返回的ref对象在组件的整个生命周期内保持不变）在函数组件中可以使用useRef和createRef但useRef性能比createRef好，快在类组件中，createRef是在初始化constructor时被赋值的（执行一次）类组件中的createRef23 Refs的应用场景与选用思考25 Refs转发机制与在高阶组件中的使用函数组件useRefimport { createRef, forwardRef, useRef } from 'r.
5 useMemo&&useCallback useMemo优化渲染现象App每次重新执行时，render变化了，引用的render不是同一个函数import React, { useState, } from "react";const Foo = props => { return <ul>{props.render()}</ul>}function App() { const [range, setRange] = useState({ min: 0, max: 10 })
4 contextHook 类组件createContext、静态属性contextType 与函数组件useContext 的对比import { Component, createContext, useContext } from 'react'const AppContext = createContext(0)class Foo extends Component { render() { return ( <AppContext.Consumer> .
3 useReducer及其实现 pureComponentimport { useState } from "react"// useReducer,// 统一调度function reducer(state, action) { console.log('reducer接收参数', state, action) const { type } = action switch (type) { case 'add': return { num: state.num .
2 Effect Hook 副作用：和外部有交互引用外部变量调用外部函数修改dom、全局变量ajax计时器（依赖window.setTimeout）存储相关纯函数：相同的输入一定会得到相同的输出Effect Hook可以让你在函数组件中执行副作用操作类组件中处理副作用在componentDidMount/componentDidUpdate声明周期中（真实dom构建以前）useEffect执行时机初次渲染之后 didMount（真实dom构建以后）渲染更新时 didUpdate是异步的，在回调.
1 State Hook Hook，使用在函数组件中不要在循环，条件或嵌套函数中(if、switch、for)调用 Hook1. 函数指向相同的引用更新方式：函数组件中state变化时才重新渲染（React使用Object.is比较算法来比较state）；而类组件每次都会更新2.强制刷新函数组件import { useState } from 'react'window.arr = []// create react app是基于webpack（模块化打包工具），如果用var声明arr，arr只是在.
2 中间件的使用、异步action的创建 react-redux是react插件将所有组件分成两大类：UI组件和容器组件安装npm install react-redux -SUI组件：只负责UI的呈现，不带有任何业务逻辑不使用this.state所有数据都由this.props提供不使用任何Redux的API，不需要使用store容器组件：负责管理数据和业务逻辑，不负责UI的呈现带有内部状态使用Redux的API组件结构用容器组件包裹UI组件容器组件负责与外部的通信，将数据传给UI组件UI组件渲染出视图.
1 redux初探、用react开发数值增值案例 含义Redux是专门用作状态管理的js库，不是react插件库可以用在react、angular、vue等项目中能集中式管理react应用中多个组件共享的状态使用npx create-react-app redux1cnpm install redux -S关键字storereduceractionsubscribe案例1. 创建store、并传入reducer import { createStore } from 'redux'import { counter }
27 JSX函数子元素的应用与思考 JSX的props.children和props本身有部分一致的特性props.children可以传递任何类型的子元素// 调用子元素回调 num 次，来重复生成组件function Repeat(props) { // 返回一组JSX let items = []; for (let i = 0; i < props.num; i++) { items.push(props.children(i)); } return <di.
26 JSX深度剖析与使用技巧 React对JSX的处理React.createElement有三个参数：标签类型，属性集合，子元素JSX其实是React.createElement函数调用的语法糖JSX → 编译 → React.createElement调用形式class App extends React.Component { render() { return ( <div className="box" id="J_Box">
25 Refs转发机制与在高阶组件中的使用 将子节点的ref暴露给父节点16.3以上 Refs转发，将ref自动通过组件传递给子组件1. 在父组件创建ref对象2. 给子组件赋值ref3. 通过React.forward向子组件转发ref属性4. 父组件的ref对象指向子组件dom5. ref参数只有在 React.forwardRef 组件内定义时可接受const MyInput = React.forwardRef((props, ref) => <input type="text" placeholder
24 React.createRef()用法细节分析 通过React.createRef → ref对象通过元素的ref属性可以附加到React元素上一般通过构造器中给this的属性赋值一个ref，方便整个组件使用ref只要传递到react元素中，就可以利用ref的current属性访问到该真实DOM节点ref在componentDidMount和componentDidUpdate触发前更新current里是null的现象由于打印时，this.modalRef才刚刚声明，current是null，但是current是个引用值，展开时访问的是.
23 Refs的应用场景与选用思考 Refs含义允许访问真实DOMReact数据流：通过props来实现父子组件的交互Refs允许强制修改子组件// 1. 构造器离添加实例属性 this.ref = React.createRef()// 2. 组件上绑定ref ref={this.ref}// 3. 使用：this.ref.currentinputclass MyInput extends React.Component { constructor(props) { super(props)
22 React高阶组件 搭建服务端yarn add expressyarn add nodemon在server目录下 npm init -y// 增加dev脚本 "scripts": { "dev": "nodemon ./index.js" },引入gitHOCHigh Order Component 高阶组件，是组件的抽象HOC不是React提供的API，高级的设计模式HOC是一个函数，接收一个组件参数，返回一个新组件普通组件返回的是UI，HOC返回的是一个新组件HOC不能修改参数
21 Fragment和短语法应用 React.Fragmentjsx语法，相当于document.createDocumentFragment()创建文档碎片容器，优化渲染解决了没有根节点的问题<></>这种短语法也会声明React.Fragment但短语法不支持keyReact.Fragment只支持key属性，其余属性如事件等不支持export default class Table extends React.Component { render() { return
关注
