js

设计模式

观察者模式

  1.    // 异步代码都是通过回调函数的方式实现的
  3.     //1、卖楼
  4.     //2、缓存列表。存放回调函数
  5.     //3、当条件完成以后，执行回调函数
  8.     class Event {
  9.         constructor(){
  10.             this.clientList=[];
  11.         }
  12.         listen(key,fn) {
  13.             if(!this.clientList[key]) {
  14.                 this.clientList[key]=[];
  15.             }
  16.             this.clientList[key].push(fn);
  17.         }
  19.         trigger() {
  20.             //shift 剪切数组的第一位，没有参数
  21.             var key=Array.prototype.shift.call(arguments);
  22.              var fns=this.clientList[key];
  23.                 for(var i=0;i<fns.length;i++) {
  24.                     fns[i].apply(this,arguments);
  25.                 }
  26.         }
  27.     }
  29.     class SalesOffices extends Event {
  30.         constructor(){
  31.             super();
  32.         }
  33.     }
  34.     var salesOffices=new SalesOffices();
  36.     salesOffices.listen("square108",function(price,squareMeter){
  37.         console.log('square108价格'+price,'square108面积'+squareMeter);
  38.     })
  40.     salesOffices.listen("square88",function(price,squareMeter){
  41.         console.log('square88价格'+price,'square88面积'+squareMeter);
  42.     })
  43.     salesOffices.trigger("square108",1000,108);

react

react的setState到底是同步还是异步？

很多小伙伴下意识的以为setState是一个异步方法，但是其实setState并没有异步的说法，之所以会有一种异步方法的表现形式，归根结底还是因为react框架本身的性能机制所导致的。因为每次调用setState都会触发更新，异步操作是为了提高性能，将多个状态合并一起更新，减少re-render调用。
如果在组件中有以下这样一段代码执行：

  1. for ( let i = 0; i < 100; i++ ) {
  2.     this.setState( { num: this.state.num + 1 } );
  3. }

如果setState是一个同步执行机制，那么组建就会被渲染100次，这对性能也是一个相当大的消耗
❝ React会将多个setState的调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新❞
同步获取到更新的数据

  1. 回调函数

    1. this.setState({number:3},()=>{
    2.      console.log(this.state.number)
    3.  })

  2. setTimeout

    1. setTimeout(()=>{
    2.    this.setState({number:3})
    3.    console.log(this.state.number)
    4. },0)

    3.原生事件中修改状态

    1. state = {
    2.  number:1
    3. };
    4. componentDidMount() {
    5.  document.body.addEventListener('click', this.changeVal, false);
    6. }
    7. changeVal = () => {
    8.  this.setState({
    9.    number: 3
    10.  })
    11.  console.log(this.state.number)
    12. }

    总结：❝ setState本身并不是异步，只是因为react的性能优化机制体现为异步。在react的生命周期函数或者作用域下为异步，在原生的环境下为同步。
    ❞
    react官网解释：

  3. State的更新可能是异步的 （解决方式，setState()接收一个函数而不是一个对象）

    1. this.setState((state, props) => ({
    2. counter: state.counter + props.increment
    3. }));

    2.State的更新会被合并