1. 程式人生 > >react高階技術點總結

react高階技術點總結

Mixin

mixin允許我們定義可以再多個元件中共用的方法,它們就是混合近元件中的物件而已,React的Mixin 
能夠防止靜默函式覆蓋,同時支援多個Mixin混合

React.createClass({
    mixins : [{
        getInitialState: function(){return {a : 1}}
    }],
    getInitialState: function(){return {b : 2}}
});
//最終結果:state => {a:1,b:2}

——————————————————————————————————

銷燬指定容器內的所有React節點。

ReactDOM.unmountComponentAtNode(DOMElement containe)

ReactDOM.unmountComponentAtNode(document.getElementById('app'));

——————————————————————————————————

React.cloneElement()

React.cloneElement()克隆並返回一個新的 ReactElement (內部子元素也會跟著克隆),新返回的元素會保留有舊元素的 props、ref、key。可以傳入三個引數 

1.要克隆的ReactElement;2.需要新新增的屬性props;3.重新設定的子節點(會替換掉原本的子節點)

注意:當第二個引數傳入名字為key值屬性時,克隆後的元件拿不到this.props.key的值

 render() {
    let span = <span ref="span">aaa</span>;
    let spanChange = React.cloneElement(span, {name:'aaa'} ,<em>bbb</em>);
    return (
      <div>
        {spanChange}
      </div>
    );
  }             
  //結果:<span name="aaa"><em>bbb</em><span>

——————————————————————————————————

React.Children.map()可以實現遍歷,但是我一般直接用map

——————————————————————————————————

forceUpdate

forceUpdate() 就是重新執行render,有些變數不在state上,但是又想達到變數更新,重新render的效果的時候,就可以使用此方法手動觸發render

參考:https://blog.csdn.net/mjzhang1993/article/details/53706768