面试总结

这两天有时间就开始总结一下面试遇到的问题

1. 垂直居中的方法

• flex + margin (强烈推荐)

.outer {
    display: flex;
 }
.inner {
    background: silver;
    margin: auto;
 }
<div class="outer">
  <div class="inner">test</div>
</div>

• flex

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
 }
.inner {
    background: silver;
 }
<div class="outer">
  <div class="inner">test</div>
</div>

• translate

.outer {
    position: relative;
}
.inner {
    background: silver;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
 }
<div class="outer">
  <div class="inner">test</div>
</div>

• display:inline-block结合:after

.outer {
    text-align:center;
 }
.inner {
    background: silver;
    display:inline-block;
 }
 .outer:after{
    content:'';
 }
<div class="outer">
  <div class="inner">test</div>
</div>

• display:-webkit-box

.outer {
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center
 }
<div class="outer">
  <div class="inner">test</div>
</div>

好了，方法还是很多的，大家择优选择吧

2. 说一下url输入到页面呈现的过程
   这个过程还是很复杂的，大致的步骤如下：

• 根据输入的网址向DNS（Domain Name Systerm）查询IP
• 通过IP向服务器发起tcp连接
• 向服务器发起请求
• 服务器返回请求内容
• 浏览器开始解析渲染页面并显示
• 关闭连接
  详细内容可以查看这篇文章
  https://segmentfault.com/a/1190000013522717

3. 说一下React生命周期
   官方说明如下，更详细的大家可以自己搜搜答案

• componentWillMount 在渲染前调用,在客户端也在服务端
• componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用
• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用
• componentWillUnmount在组件从 DOM 中移除的时候立刻被调用

4. 介绍一下redux
   这个我之前就介绍过了，这里就不赘述了
5. 实现深拷贝的方法
   深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。假设B复制了A，修改A的时候，看B是否发生变化：

• 如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）
• 如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）
  浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址
  深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存

深拷贝的实现方法：
1、JSON方法实现：

let deepClone = function (obj) {
    let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式
    let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象
    return result;
};

let obj1 = {
    person1: {
        age: 20,
        class: 1502
    },
    person2: {
        age: 21,
        class: 1501
    }
};

let test = deepClone(obj1);
console.log(test);

2、使用递归的方式实现深拷贝

function deepCopy(obj) {
      if (typeof obj !== 'object') {
          return obj
      }
      if (Array.isArray(obj)) {
          return obj.map(item => deepCopy(item))
      }
      if (typeof obj === 'object') {
            keys = Object.keys(obj)
            return keys.reduce((result, key) => {result[key] = deepCopy(obj[key]); return result}, {})
      }
  }