面试题

1、去除图片之间的间隙

左右

图片
解决方法：

• 将<img>标签写在一行。（回车可能会导致页面解析，多出空白）
• 给<img>的父级标签写上style="font-size: 0"
• 给<img>(img是内联元素)设置为float: left
• 给<img>的父级加letter-spacing:-800px(值无论是多少都不会产生重叠)
  选其中的一种方法设置之后
  图片

---

2、react组件的生命周期

---

3、react组件的三种创建方式

• 无状态组件

无状态组件：只是为了创建纯展示组件，只负责根据传入的props来展示， 不涉及到要state状态的操作。
注意：

1、组件不会被实例化，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升
2、不能访问this对象，this.state，this.props，this.ref都不可使用
3、需要使用父组件的props通过props.xxx来访问
4、组件无法访问生命周期的方法，因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}

• es5的React.createClass
  不太使用，了解就可以，但是暂时不会废弃，等react找到替代mixins方案之前是不会废弃的
• es6的extends React.Component react推荐使用

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };

        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};

---

4、git pull 和git feach的区别

• git pull：将本地仓库根据远程仓库更新至最新
• git feach：将远程仓库根据本地仓库更新至最新

---

5、深拷贝和浅拷贝的区别和实现方式。

深拷贝
指针a对指针b进行深拷贝，那么就会重新开辟一个新的内存空间，存放b指针内存空间的内容，俩个职责指针内容完全相同，但是分别存放于不同的内存空间中，所以a发生变化时，b不会发生变化。

深拷贝

• 广度优先遍历
• JSON

function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}  //但是不能实现对对象方法的拷贝

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

//使用递归的方式实现数组、对象的深拷贝
function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

• 使用Object.create()方法

function deepClone(initalObj, finalObj) {
    var obj = finalObj || {};
    for (var i in initalObj) {
        var prop = initalObj[i];
  
        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
        if(prop === obj) {
            continue;
        }
  
        if (typeof prop === 'object') {
            obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
        } else {
            obj[i] = prop;
        }
    }
    return obj;
}

• 通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);

• 使用object.assign方法

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

• lodash函数库实现深拷贝

lodash.cloneDeep()

浅拷贝
只是增加了一个指针a，和之前的指针b指向同一块内存。当a发生变化时，b也变化。

浅拷贝是只对指针进行拷贝，两个指针指向同一个内存块，深拷贝是对指针和指针指向的内容都进行拷贝，拷贝后的指针是指向不同内的指针

---