react-hook

Hook是React 16.8.0版本增加的新特性/新语法， 可以让你在函数组件中使用 state 以及其他的 React 特性
1 State Hook

import React, {useState,useEffect} from 'react'

usestate的参数是初始化缓存的值，返回值是包含两个元素的数组，第一个为内部缓存的值，第二个为更新状态的函数。

 let [count,setcount] = useState(0);
   function increment(){
        setcount((count)=>count+1);
    }

2 Effect Hook
Effect Hook 可以在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子),React中的副作用操作:
发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM

 useEffect(()=>{
      let timer  = setInterval(()=>{
           setcount((count)=>count+1);
       },1000);
       return ()=>{
            clearInterval(timer) // 在此做一些收尾工作, 比如清除定时器/取消订阅等，模拟componentWillUnmount() 
       }
    },[]);// 如果指定的是[], 回调函数只会在第一次render()后执行,也就是模拟了componentDidMount()生命周期

可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount() ,如果不指定第二个参数，那么在组件第一次render和后续state数据发生改变的时候都会去执行一次该函数。
3 Ref Hook
(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样
4当祖孙组件互相通信传递数据时
1.创建Context容器对象：

const MyContext = React.createContext()
const {Provider} = MyContext;

 <Provider value={{username: this.state.name}}>
      <A/>
 </Provider>

2.要接收传递的数据则必须使用contextType进行接收

   static contextType = MyContext;

  <h4>我的用户名是{this.context.username}</h4>