函数式组件与类式组件的区别

总结如下：

1、在异步更新时：

  • 类组件有 this，可以通过 this.state.value 指向最新的值，不想指向最新的值可以使用闭包的办法。
  • 函数组件没有this，捕获了渲染时（例如点击时）所使用的值，可以通过 useRef 来拿到最新的值

2、在使用 hooks 时：

  • 在处理类似于 intervals 和 subscriptions 这样的 命令式API 时，ref 会十分便利。可以用 ref 跟踪任何值 —— 一个prop，一个state变量，整个props对象，或者甚至一个函数。然后可以使用 useCallback 来优化，reducer 可能是更好的选择。
  • 要记得使用 useEffect、useCallback。还要了解 useReduce 和 useCallback 之间的区别，以更好的选择他们。
  • 使用了很多函数组件之后，要记得优化代码和了解什么值会随着时间而改变

3、hooks 的心法：

“写代码时要认为任何值都可以随时更改”。

React的优化

...this.props 不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担。

方法绑定的使用

  1. 方法直接绑定在dom节点中
<div onClick={this.tap.bind(this)} />
  1. 方法绑定放在constructor中
constructor(props) {
    super(props);
    this.tap= this.tap.bind(this);
}
  1. 箭头函数
tap = ()=>{};
<div onClick={this.tap} />
tap =(value)=> {};
<div onClik={()=>this.tap(value)} />

总结：

1.由于绑定是在render中执行，而render是会执行多次的，每次bind和箭头函数都会产生一个新的函数，因而带来了额外的开销

2.使用构造器bind的方法，每个实例都可以有效地共享函数体，从而更加有效的使用内存。但当要绑定的函数较多时，这种方法又显得相对的枯燥和无聊。所以，在知道实例不多，函数体不大的前提下，使用箭头函数更加快捷。

3.综合三种写法，第三种是目前最优写法

数组遍历map

map里面添加key，并且key不要使用index（可变的）,尽量使用稳定常量作为key。使用index作为key，只是会让代码不报错，其他一无是处。
每当组件的props或state改变时, React会重新创建一个virtual DOM, 与上一个作对比, 如果发现两个virtual DOM不完全相同, 则React就会做reconcile, 把有差异的地方更新到真实的DOM上。
使用常量作为key

尽量少用不可控的refs、DOM操作。

props和state的数据尽可能简单明了，扁平化。便于数据对比，数组遍历从而减小带来的性能消耗。

使用return null而不是CSS的 display:none 来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。

注意可重构的代码，组件化

  • 组件分类
  • 可复用性
  • 足够细
  • 耦合度低

promise 同时三个请求

场景：需要请求多个接口获取数据后，才能进行其他操作。比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

（1）Promise.all 可以将多个 Promise 实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值，只要有一个失败都是返回失败结果。

（2）Promise.all 获得的成功结果的数组里面的数据顺序和 Promise.all 接收到的数组顺序是一致的，即p1在前，即便p1的结果获取的比p2要晚。p1的返回数据也会在p2前面。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景。

HTTP1 HTTP2

新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。

多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。

header压缩，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。

服务端推送（server push），同SPDY一样，HTTP2.0也具有server push功能。

请求头里加什么做到缓存效果

const options = {
  storage: true, // 是否开启loclastorage缓存
  storageKey: 'apiCache',
  storage_expire: 600000, // localStorage 数据存储时间10min（刷新页面判断是否清除)
  expire: 20000 // 每个接口数据缓存ms 数
};

webpack 打包原理

webpack根据 webpack.config.js 中的入口文件，在入口文件里识别模块依赖，不管这里的模块依赖是用CommonJS写的，还是ES6 Module规范写的，webpack会自动进行分析，并通过转换、编译代码，打包成最终的文件。最终文件中的模块实现是基于webpack自己实现的webpack_require（es5代码），所以打包后的文件可以跑在浏览器上。

React父子组件的传递

react的数据流是单向的，最常见的就是通过props由父组件向子组件传值。

接下来我们反过来，让子组件向父组件通信。 子组件向父组件通信的基本思路是，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值。

发布者与订阅者模式

兄弟间组件通信，一般的思路就是找一个相同的父组件，这时候既可以用props传递数据，也可以用context的方式来传递数据。 当然也可以用一些全局的机制去实现通信，比如redux等。

懒加载的原理

一张图片就是一个标签，浏览器是否发起请求图片是根据图片的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给图片的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给图片的src赋值。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。