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'));

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

getDerivedStateFromProps:

周期：在state和props改变时，都会触发

static getDerivedStateFromProps(nextProps, prevState)

触发时间：在组件构建之后(虚拟dom之后，实际dom挂载之前) ，以及每次获取新的props之后

作用： it avoids unnecessary re-render.

使用：他返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。

如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。

相关：memoize-one

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

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

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

Fragments

场景：15以前，render 函数的返回必须有一个根节点，否则报错，为满足这一原则我会使用一个没有任何样式的 div 包裹一下。

16以后react支持返回数组，如果不写数组，就用到了Fragments

作用：包裹许多子元素，但是不生成标签

Fragments简写形式<></>

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

ReactDOM.createPortal将组件渲染到父节点之外的节点

ReactDOM.createPortal(<App></App>,Node)

新特性概述：

按照 React16 的更新时间，从 React v16.0 ~ React v16.6 进行概述。

React v16.0

render 支持返回数组和字符串、Error Boundaries、createPortal、支持自定义 DOM 属性、减少文件体积、fiber；
React v16.1

react-call-return；
React v16.2

Fragment；
React v16.3

createContext、createRef、forwardRef、生命周期函数的更新、Strict Mode；
React v16.4

Pointer Events、update getDerivedStateFromProps；
React v16.5

Profiler；
React v16.6

memo、lazy、Suspense、static contextType、static getDerivedStateFromError()；
React v16.7（~Q1 2019）

Hooks；
React v16.8（~Q2 2019）

Concurrent Rendering；
React v16.9（~mid 2019）

Suspense for Data Fetching；

常见报错：关于Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. 

报错原因是由于在组件卸载后进行了setSate操作

解决方法：

componentWillUnmount = () => {
    this.setState = (state,callback)=>{
      return;
    };
}

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

           https://segmentfault.com/a/1190000013220508

           https://segmentfault.com/a/1190000017321982

           https://www.cnblogs.com/zyl-Tara/p/7998590.html