React高阶组件Hook

Hook是react16.8新增的，它可以让你在不编写class的情况下使用state以及其他react特性。

Hook特点①使你在无需修改组件的情况下复用状态逻辑②可将组件中互相关联的部分拆分成更小的函数，复杂组件将更容易理解③更简洁，更容易理解的代码

先来看个例子

import React,{useState} from 'react'
export function Hook(){
    const [count,addCount]=useState(5);
    return <div>
        <p>{count}</p>
        <button onClick={()=>{addCount(count+1)}}>增加</button>
    </div>
}

引入useState，它可以对函数组件添加状态，用一个数组接收，上面的count即为5，addCount可以改变它的状态。再看下面的例子

import React,{useState,useEffect} from 'react'
export function Hook(){
    const [count,addCount]=useState(5);
    useEffect(()=>{console.log(count)},[])
    return <div>
        <p>{count}</p>
        <span>{a}</span>
        <button onClick={()=>{addCount(count+1)}}>增加</button>
    </div>
}

引入useEffect，它是一个副作用钩子，在组件每次渲染时都会重新执行，它跟class组件的compomentDidMount，CompomentDidUpdate，CompomentWillUnMount具有相同的用途，只是合成了一个api。

还有一个组件跨层级通信Context，它提供了一种不需要每层设置props就可以跨多层组件传递数据的方式

import React,{useContext} from 'react'
const myContext=React.createContext()
const {Provider,Consumer}=myContext
 function Hook(prop){
  return <div>{prop.foo}</div>
}//第一种方法

function Hook(prop){
    var ctx=useContext(myContext);
    return <div>{ctx.foo}</div>
}//第二种方法

class Hook extends React.Component{
   static contextType=myContext;
   render(){
       return (<div>
           {this.context.foo}
       </div>)
   }
}//第三种方法（使用class指定静态contextType）

export  function ContextTest(){
    return(
        <div>
            <Provider value={{foo:'bar'}}>
                <Consumer>
                    {value=><Hook {...value}></Hook>}
                </Consumer>
            </Provider>
        </div>
    )
}

 

引入一个Provider和Consumer，然后就可以把ContextTest的值传递给Hook这个组件。上面还提供了三种方法