react高階技術點總結
阿新 • • 發佈:2018-11-01
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