react高级技术点总结

版权声明：转载请注明出处 https://blog.csdn.net/qdmoment/article/details/82890658

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

扫描二维码关注公众号，回复： 3878129 查看本文章

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