知识点
JS
数据类型及判断
数据类型：
基本类型：string、number、undeifined、·null、symbol、boolean
引用类型：object
数据类型的检测：
typeof
console.log(typeof []) // object
console.log(typeof function) // object
console.log(typeof object) // object
这些是特殊的
Instanceof
console.log( [] instanceof Array) // true
console.log( function() {} instanceof function) // true
console.log( {} instanceof object) // true
Instanceof可以判断对象的类型,只能判断引用类型，不能判断基本数据类型，原理就是判断在其原型链上能否找到该类型的原型
Es6
字符串存在性判定方法：
includes() 判断是否包含某个/某串字符
startsWith() 判断是否以某个/某串字符开头
endsEith() 判断是否以某个/某串字符结尾
自动重复：
repeat（）可以使同一个字符串输出多次
事件循环
JS任务总体分为同步任务和异步任务，异步任务分为宏任务和微任务。在微任务执行完再执行宏任务。
- 宏任务：整体代码script、setTimeout、setInterval、setImmediate、i/o操作（输入输出，比如读取文件操作、网络请求）、ui render（dom渲染，即更改代码重新渲染dom的过程）、异步ajax等
- 微任务：Promise（then、catch、finally）、async/await、process.nextTick、Object.observe(⽤来实时监测js中对象的变化)、 MutationObserver(监听DOM树的变化)
作用域和闭包
Console.log()的执行情况
Promise对象
三种状态和.then
Css
flex
Webpack
Html-webpack-plugin
- 为html文件中引入的外部资源如script、link动态添加每次build后的新内容
- 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
Webpack dev serve
首先，它是帮我们开启一个服务的，开启服务是因为，
- 项目最终要打包上线，最好能模式线上环境进行开发测试
- webpack-dev-server就是一个让我们模拟线上环境进行项目调试的根据
我们之前手动打开index.html始终是在本地运行的，和开发环境是有区别的，那我们可以用webpack-dev-server模拟一个线上环境，把我们的代码放到这样一个线上环境运行。
3.14
类组件在渲染时会创建一个实例
调用KerwinApp这个组件时，会react会New一个KerwinApp实例，然后KerwinApp实例调用render方法进行渲染
React16.8之前函数式组件没有状态
ES7+ React/Redux/React-Native snippets 这个插件很好用，代码辅助功能
插槽（Slot）是 Vue.js 组件系统的一个重要概念。它允许组件接受外部内容，并将其插入到组件内部的特定位置。插槽可以让组件更加灵活和可定制化，因为它可以在组件内部插入任意内容，并在组件使用时进行动态替换。
在 Vue.js 中，插槽分为匿名插槽和具名插槽两种类型。匿名插槽可以在组件标签内部直接填写内容，它将被插入到组件内部的默认位置。例如：
<my-component>
<p>This will be inserted into the default slot</p>
</my-component>
具名插槽则可以在组件内部定义一个或多个插槽位置，并在组件标签内部使用 v-slot 指令将内容插入到指定的插槽位置。例如：
<my-component>
<template v-slot:header>
<h1>This will be inserted into the header slot</h1>
</template>
<template v-slot:footer>
<p>This will be inserted into the footer slot</p>
</template>
</my-component>
在组件内部，插槽可以使用 <slot> 标签来引用。例如：
<template>
<div>
<header>
<slot name=”header”></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name=”footer”></slot>
</footer>
</div>
</template>
在这个示例中，组件内部定义了一个带有三个插槽的布局，分别是名为 header、default 和 footer 的插槽。在组件标签内部，使用 v-slot 指令将内容插入到指定的插槽位置。在组件内部，使用 <slot> 标签来引用插槽。在这个示例中，<slot> 标签中的 name 属性用来指定具名插槽的名称，如果没有指定，则表示匿名插槽。
slot-scope 或 v-slot 指令 ？？？？
下· ？？？？
react并不会绑定事件到每一个具体的dom元素上，而是采用事件代理的模式
事件绑定的this问题容易模糊尤其是bind（改变this指向，事件绑定中之所以使用bind而不是call、apply，是因为bind绑定this后，不会立即执行。就像this.handleClick和this.handleClick()的问题）
比如 再setTimeOut中是同步执行的，源码中对于setState好像有一个合并标志位，在同步代码中为true，就会让setState合并到一起执行，反之同步执行为false
SetState还有第二个参数，是回调函数，知道状态和dom后就会触发
双向数据流和双向数据绑定是一回事吗？
答：双向数据流和双向数据绑定有些微小的差别，它们并不是完全相同的概念。
双向数据绑定是指在视图层（通常是用户界面）和数据层之间建立一个双向的关联关系，使得当一个层次的数据发生变化时，另一个层次的数据也会相应地发生变化。在前端框架中，双向数据绑定通常通过数据绑定语法来实现，比如 Vue 中的 v-model 指令、Angular 中的双向数据绑定语法等等。
而双向数据流是指数据在组件之间的传递方向。在单向数据流中，数据的传递方向是从父组件到子组件，子组件不能直接修改父组件传递的数据。在双向数据流中，子组件可以修改父组件传递的数据。在 React 中，为了实现双向数据流，可以使用 controlled components 和回调函数来实现。在 Vue 中，双向数据绑定就是一种双向数据流的实现方式。
因此，虽然双向数据绑定和双向数据流有些微小的差别，但它们在大多数情况下是可以互换使用的。两者的目的都是为了在视图层和数据层之间建立一种双向的关联关系，让数据的变化能够及时地反映到视图中，并且用户在视图中的操作也能够立即地反映到数据中。
3.21
REACT中非父子组件通信方式
- 状态提升：比如两个兄弟组件之间要通信，就要寻找他们最近的父组件，把要通信的状态放到父组件中（变量提升），然后具体步骤就是’子传父（通过回调函数）’，然后父传子（通过props）进行实现。
- 发布订阅模式（一种原生的设计模式，和框架无关）：
订阅者调用subscribe（）函数传递一个回调函数，然后放在一个list中，之和等到发布者要发布时，会调用publish（）函数，遍历list中所有的回调函数并执行（list中的所有的回调函数是所有订阅者的回调函数）
- Context方案（react官方提供）：
React中context是通过类似与Vue中的slot实现的
<GlobalContext.Consumer>XXXXXXX</GlobalContext.Consumer>其中的XXXX在vue中是需要在组件中写<slot></slot>的，XXXX才能传进去
而在react中也有插槽的概念
React把插槽的内容存放在props中，通过this.props.children来取值
多个dom就是数组了
4.19
高阶组件 HOC（hight ordered component）
- withRouter就是高阶组件
- 高阶组件的本质其实就是一个函数，该函数参数接收一个组件，返回值依然是一个组件，返回的组件一般会比参数组件多一些props属性
- 组件代码复用的一种方式（高阶组件可以向别的组件中注入通用的props属性）
创建
使用
Render Props
render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
这项技术使我们共享行为非常容易。要获得这个行为，只要渲染一个带有 render prop 的 <Mouse> 组件就能够告诉它当前鼠标坐标 (x, y) 要渲染什么。
5.8
关于search参数格式化的方法与使用
import { stringify as qStringify } from ‘qs’;
History的使用
history.push({
pathname: ‘/djcmes/mpl/scheme-phase’,
search: stringify({ id: record.id }),
state: { record },
});
接受
const { search } = this.props.location;
const simulateRecord = this.props.location.state.record;
前端性能优化
尽量避免重绘与回流(重排)，重绘不一定导致重排，但重排一定会发生重绘。
重绘是指例如元素颜色的改变，不需要页面整个结构。
重排是指重新生成布局，重新排列元素，例如元素的宽高改变。
