javaScript 排雷

易错

页内式注意点script

......

标签中的js代码一半写在文档的尾部；

• 网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
• HTML页面中出现

  由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。

  分号引发的问题

  编写Javascript注意语法规范，一行代码结束后必须在代码最后加上;
  如果不写分号，浏览器会自动添加，但是会消耗一些系统资源；
  此外，容易加错分号，所以在开发中分号必须要写。

  list引发的血案

  某些中我们使用索引(+1)作为key，没有什么问题。接下我们看看什么情况会出事。

  假设我们的的列表数据从

  [
      {id:2,text:'b'},
      {id:3,text:'c'},
      {id:5,text:'e'}
  ]
  

  变成了

  [
      {id:1,text:'a'},
      {id:2,text:'b'},
      {id:3,text:'c'},
      {id:4,text:'d'}
  ]
  

  仍然使用索引作为key，那么渲染出来的应该是

  旧的

  b
  c
  e
  

  新的

  a
  b
  c
  d
  

  这种情况下的流程：

  对比第一项key都是1，但是内容变了，替换文本
  对比第二项key都是2，但是内容变了，替换文本
  对比第三项key都是3，但是内容变了，替换文本
  第四项key为4是新的，新增
  这个和我们想的就有区别了，因为我们只是想做两步操作，即替换第1个和添加第4个。而现在做了四步操作。

  也许这个例子显得没有那么糟糕，但是想象一下，如果是在一个50项的列表中插入1个新的到头部，那么后面的50项将都会进行dom更新渲染，如果每一项内容是复杂的组件，那么代价更加高昂，而我们其实只是想在第一个元素前插入一条。

  那么如果解决上面的问题呢，其实很简单，我们的列表数据都有唯一的id值，而实际开发中我们列表中一般都会存在这样的唯一值，我们只需要把它复制给key即可。

  那么我们的列表会变成这样

  旧的

  b
  c
  e
  

  新的

  a
  b
  c
  d
  

  这种情况下的流程：

  第一项key为1是新的，新增，节点变成4个
  对比第二项key都是2，内容不变，不处理
  对比第三项key都是3，内容不变，不处理
  第四项key为4，旧的是5，替换节点

  将列表和列表项单独写成纯组件

  为什么？
  我们可能已经习惯这样写列表

  render(){
      render (
          
  
              {this.state.list.map(item=>
  {item.text}
  )}
          
      )
  }
  

  在大多数情况下，这样写没有什么问题，reactjs执行速度很快，但是有些情况下，这样写可能成为导致网页卡顿的罪魁祸首。

  每当我们改变组件状态的时候，reactjs都会重建当前组件的整个虚拟dom树，也就是说不管你的state.list是否有改变，整个树都会重建，而这个时候列表的渲染是不必要的，当列表过长，组件状态更新频繁，甚至手机性能不佳的情况下，不断的重新创建虚拟dom树很有可能会导致页面帧数下降。

  不要在属性上箭头函数

  箭头函数很方便，不仅写法简单还能保持this指向父级作用域。

  为了维护事件处理函数的this，我们经常在组件中看到它类似这样的使用

  {alert(11)} />
  

  但是这样写会有几个问题

  每次render都会重新创建一个新的函数，浏览器创建和回收对象都会有开销，如果是列表，那么每个列表项都会创建和销毁。
  因为每次render都是传入新的函数，shouldUpdateComponent浅比较必然不相等，会导致PureComponent组件失去应有效果。
  正确的做法
  如果使用了transform-class-properties

  handleClick = ()=>{
      alert(1)
  }
  
  

  或者

  constructor(){
      super(...arguments)
      this.handleClick = this.handleClick.bind(this)
  }
  
  handleClick = ()=>{
      alert(1)
  }
  

  摘抄或者引用以下文章：
  作者：撩课_叶建华
  链接：https://www.jianshu.com/p/4d7bff7a9145
  作者：yqz0203
  链接：https://segmentfault.com/a/1190000011191890