生命周期

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可以让列表元素独立存在组件。

<React.Fragment>
     <div onClick={()=>this.child()}>Catch1</div>
     <div onClick={()=>this.child()}>Catch2</div>
     <div onClick={()=>this.child()}>Catch3</div>
</React.Fragment>

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 <Provider value={this.state}>
        {this.props.children}
    </Provider>
}

子组件

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

hooks

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

import React, { useState } from 'react';
function Hook(){
    const [getCount,setCount] = useState(99);
    const [getName,setName] = useState("祝阳");
    return (
        <div>
            <p>姓名:{getName}   年纪:{getCount}</p>
            <button onClick={()=>setCount(getCount+1)}>click</button>
        </div>
    )
}
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参数传递
根组件的定义

<CountContext.Provider value={count}>
    <Counter />
</CountContext.Provider>

子组件的定义

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