創(chuàng)建組件的方法？

1.函數式組件：不需要實例化

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 

2.React.createClass 會自綁定函數方法導致不必要的性能開銷；需要實例化；會自動綁定this；將廢棄
3.React.Component 只綁定需要關心的函數；需要實例化；適合高階組件；需要手動綁定this
4.pureComponent

component和pureComponent的區(qū)別？

幾乎相同，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); // 創(chuàng)建元素
  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() // 子節(jié)點也是虛擬 DOM，遞歸構建
      : document.createTextNode(child); // 字符串，構建文本節(jié)點
    e.appendChild(childE);
  });
 
  return e;
}

diff算法采用深度優(yōu)先，只對比同級的差異，因為跨級操作dom的情況很少

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

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