react16新特性

生命周期

1、getSnapshotBeforeUpdate
状态改变时触发，触发在render之前，传递两个参数，上一个props和上一个state，返回值作为componentDidUpdate第三个参数传入。

getSnapshotBeforeUpdate(prevProps, prevState){
    return 456
}
componentDidUpdate(perProps, perState, perScrollHeight){
    console.log("perScrollHeight",perScrollHeight);
}

2、componentDidCatch
捕获子组件的错误信息

componentDidCatch(error){
    console.log("error",error);
}

新语法

1、React.Fragment
每个组件都会有个根元素进行包裹，通过React.Fragment可以让列表元素独立存在组件。

     
this.child()}>Catch1
     
this.child()}>Catch2
     
this.child()}>Catch3

2、React.memo
React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。父组件的状态更新不会影响子组件的渲染，我们可以仅仅让某些组件进行渲染。
class Catch extends React.PureComponent
export default React.memo(Catch)
3、React.createContext
父组件可以隔代传递数据给子组件，父组件通过Provider定义数据，子组件通过Consumer接收数据。
context.js文件

import React from 'react';
let {Provider ,Consumer} = React.createContext();
export {Provider ,Consumer};

父组件

render(){
    return 
        {this.props.children}
    
}

子组件

render(){
    let {path ,component:Component} = this.props;
    return 
        {(state)=>{
            console.log(state)
        }}
    
}

hooks

无状态组件也就函数形式的组件无法定义状态，也没有生命周期，hooks提供了这些功能。减少class定义组件的复杂行、对组件进行了优化。
1、useState定义状态

import React, { useState } from 'react';
function Hook(){
    const [getCount,setCount] = useState(99);
    const [getName,setName] = useState("祝阳");
    return (
        

            
姓名:{getName}   年纪:{getCount}
            setCount(getCount+1)}>click
        
    )
}
export default Hook;

2、useEffect定义生命周期

//componentDidMount和componentDidUpdate都会触发
useEffect(()=>{
    console.log("生命周期")
});
//componentDidMount触发
useEffect(()=>{
    console.log("生命周期")
},[]);
//componentDidUnmount触发
useEffect(()=>{
        return ()=>{
            console.log("生命周期")
        }
    },[]);
//componentUpdate触发
const mounted = useRef();
useEffect(()=>{
    if(!mounted.current){
        //componentDidMount
        mounted.current=true
    }else{
        //componnentDidUpdate
    }
});

3、useContext参数传递
根组件的定义

子组件的定义

import React, { useState , createContext , useContext } from 'react';
function Child(){
    const count = useContext(CountContext)  //得到count
    return (
{count}
)
}