React相关

创建组件的方法？

1.函数式组件：不需要实例化

function HelloComponent(props, /* context */) {
  return 
Hello {props.name}
}
ReactDOM.render(, mountNode) 

2.React.createClass 会自绑定函数方法导致不必要的性能开销；需要实例化；会自动绑定this；将废弃
3.React.Component 只绑定需要关心的函数；需要实例化；适合高阶组件；需要手动绑定this
4.pureComponent

component和pureComponent的区别？

几乎相同，pureComponent会进行浅对比，判断shoudComponentUpdate是否需要更新

setState的函数式写法？

this.setState(plusone);
function plusone(cc, props){
    console.log(cc);
    return{count: cc.count + 1};
}

setState如何不render？

shoudComponentUpdate返回false

组件传值的方法？

1.回调ref 子组件props.value 父组件value={}

虚拟dom和diff算法？

只要进行一次 DOM 更新，整个浏览器渲染流程都会重做一遍，然后每个dom的属性又特别多，vdom是在js和dom之间做一个缓存

export default Ele = (tagName, props, children) => {
  this.tagName = tagName
  this.props = props
  this.children = children
}
Ele.prototype.render = function () {
  var e = document.createElement(this.tagName); // 创建元素
  var props = this.props;
 
  for (var propName in props) { // 设置 DOM 属性
    var propValue = props[propName];
    e.setAttribute(propName, propValue);
  }
 
  var children = this.children || [];
 
  children.forEach(function (child) {
    var childE = (child instanceof Element)
      ? child.render() // 子节点也是虚拟 DOM，递归构建
      : document.createTextNode(child); // 字符串，构建文本节点
    e.appendChild(childE);
  });
 
  return e;
}

diff算法采用深度优先，只对比同级的差异，因为跨级操作dom的情况很少

如何避免合成事件和原生事件冒泡？

合成event.stopPropagation();
原生event.nativeEvent.stopImmediatePropagation();
阻止默认方法event.preventDefault();