拾遗

1. document.visibilityState

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

document.addEventListener("visibilitychange", function () {
    if (document.visibilityState == "visible") { 
    	// do something
    }
}, false);

2.相邻兄弟选择器 +

h1 + p {margin-top:50px;} // 选择紧接在 h1 元素后出现的p，h1 和 p 元素拥有共同的父元素

3.map+area标签

map热区需要配合img标签使用，只有img标签有usemap属性。

usemap指定某个id的map，map标签内指定多个area，area需要指定形状和坐标，跳转的url，也可以指定onclick、onmousemove等事件。

4.background-attachment 设置固定的背景图像：

background-attachment的缺省值是scroll，也就是背景图片和内容的位置是相对静止的。这我们大家都见过，当我们上下滚动一个网页时，背景和内容一起滚动。

当把background-attachment设置成fixed时，事情会变得有趣。fixed是说背景图片不随内容一起滚动，而是跟窗口保持静止。也就是说，当你拖动滚动条时，背景图片没有变化。这就能够产生漂亮的视差效果。

background-attachment属性参考网址：https://www.webhek.com/post/parallax.html

5.js监听浏览器离开操作和页面刷新操作

window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue=("确定离开当前页面吗？");
}

6.Object.defineproprty(target, props, handler)和new Proxy(target, handler)

两个方法分别是vue3.0之前和当前版本下数据双向绑定的核心方法。

Object.defineProperty无法监听数组变化，Proxy可以直接监听数组的变化。

Proxy监听劫持整个对象而非属性，并返回一个新对象,不管是操作便利程度还是底层功能上都远强于Object.defineProperty。

7.react更新state的正确方式

// 方法一
this.setState({name:"some name"})

// 方法二
this.setState((state, props) => {
    timesVisited: state.timesVisited + props.count
});

9.React边界错误

错误边界有两个作用

如果发生错误，显示回退UI
记录错误

如果组件类实现了 getDerivedStateFromError或componentDidCatch 这两个生命周期方法的任何一下，，那么这个类就会成为ErrorBoundary。前者返回{hasError: true}来呈现回退UI，后者用于记录错误。

import React from 'react'

export class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, info) {
      // You can also log the error to an error reporting service
      console.log('Error::::', error);
    }
  
    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>OOPS!. WE ARE LOOKING INTO IT.</h1>;
      }
  
      return this.props.children; 
    }
  }

8.React.Fragment用于JSX中包裹子节点

// Without Fragments   
return (
    <div>
       <CompoentA />
       <CompoentB />
    </div>
)

// With Fragments   
  return (
    <React.Fragment>
       <CompoentA />
       <CompoentB />
    </React.Fragment>
  )

  // shorthand notation Fragments   
  return (
    <>
       <CompoentA />
       <CompoentB />
    </>
  )

9.持续更新中......