【容错笔记】js/css/react等(持续记录)

目录

一. position的绝对定位一定是根据设置了相对定位的父元素进行定位的吗？

二. react-hooks的工作机制

三.js除了递归方法，还有哪些方法可以实现数组的扁平化flatten?

四、正则的易混淆规则

 五、哪些方法可以实现异步编程模式

---

一. position的绝对定位一定是根据设置了相对定位的父元素进行定位的吗？

实验：

总结：根据代码，可以看到，黑色盒子和紫色盒子是兄弟盒子，而将紫色盒子设置了position:absolute，而目前没有明确的父盒子，它就会去找离它最近的一个已定位的盒子进行定位的（默认是body）。 

然后紫色盒子里面，放了一个黄色的盒子，和设置了position:absolute定位的灰色盒子。可以看到，及时紫色盒子没有设置position:relative，灰色盒子也是能够准确定位的，并且触发生成了BFC，独立的格式化上下文。

二. react-hooks的工作机制

首先看class类：多次点击按钮，点击4次后，更新页面，因为setTimeout函数3s后再放入调用栈，而整个state状态里count已经为4，所以输出为4个4。说明这个state对象在每次render前后都是同一个对象。

class Square extends React.Component{

  constructor(props) {
      super(props);
          this.state = {
          count: 0,
      }
  }

  componentDidUpdate() {
      setTimeout(() => {
          console.log(this.state.count)
      }, 3000)
  }

  add = () => {
      const {count} = this.state;
      this.setState({count: count + 1})
  }


  render() {
      return (
          <div>
              <button onClick={this.add}>click me</button>
          </div>
      )
  }
}

使用hooks：

点击了4次按钮，过一会，控制台依次输出1,2,3,4（第一个0是因为第一次挂载完成时会执行）。说明每次更新render前后，都会生成独立的state。

function Square() {
  const [count, setCount] = useState(0);

  useEffect(() => {
      setTimeout(() => {
          console.log(count)
      }, 3000)
  })
  return (
      <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
              Click me
          </button>
      </div>
  );
}

三.js除了递归方法，还有哪些方法可以实现数组的扁平化flatten?

1.首先递归：

function flatten(arr){
    var result = [];
    for(var i = 0, len = arr.length; i < len; i++){
        if(Array.isArray(arr[i])){
            result = result.concat(flatten(arr[i]));
        }else{
            result.push(arr[i]);
        }
    }
    return result;
}

flatten(arr);   // [1,2,3,4]

2.递归+reduce()方法

function flatten(arr){
    return arr.reduce(function(prev, cur){
        return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)
    },[])
}

flatten(arr);   // [1,2,3,4]

3.es6的扩展运算符...

这里需要注意arr.concat()的数组合并 / 值合并

四、正则的易混淆规则

[1] 

• \W(大写)可以匹配除单词字符之外的所有字符，它等价于"[^a-zA-Z0-9_]"。

• \w元字符用来匹配单词字符，它等价于"[a-zA-Z0-9]"。

 五、哪些方法可以实现异步编程模式

先解释一下“同步模式”和“异步模式”：

（1）同步模式：就是后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。

（2）异步模式：完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数,后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。JavaScript中实现异步编程模式的4种方法,回调函数、事件监听、发布/订阅、Promises对象：

• （1）回调函数：这是异步编程最基本的方法，优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。例：假定有两个函数f1和f2，后者等待前者的执行结果，如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。
• （2）事件监听：任务的执行不取决于代码的顺序，而取决于某个事件是否发生。优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以”去耦合”（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。例：为f1绑定一个事件，当f1发生done事件，就执行f2。
• （3）发布/订阅：我们假定，存在一个”信号中心”，某个任务执行完成，就向信号中心”发布”（publish）一个信号，其他任务可以向信号中心”订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”（publish-subscribe pattern），又称”观察者模式”（observer pattern）。这种方法的性质与”事件监听”类似，但是明显优于后者。因为我们可以通过查看”消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。
• （4）Promises对象：是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。简单说，它的思想是，每一个异步任务返回一个 Promise对象，该对象有一个then方法，允许指定回调函数。回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。 例：f1的回调函数f2，f1().then(f2);

 六、react 更新state： 不能依赖于当前的值来更新下一个状态