React Hooks(v17.0.2)

Hooks是在版本16.8新增的特性；

Hooks到底是为何而存在，从React官方文档的描述中，貌似跟class组件的复杂性和分明的生命周期有一定的关系，当然官方也说了不会移除class组件的，class组件目前来说还是React的核心之一，Hooks具有兼容性即随时随地可以使用，目前只在函数组件中使用，可以说是函数组件的福音，使函数组件也能在一定程度上使用class组件的特性如state、refs、context等；先看Hooks都做了哪些事情；

1，基础Hooks：useSate、useEffect、useContext: ；

useState: useState的使用： var [count, setCount] = useState(?defaultVal); useState返回了一个数组，该数组的第一元素是state、第二个元素是对应的用来更新state的函数；可以给useState传入一个默认值，该默认值可以是数值如字符串'string' 或者一个返回初始state的函数，在组件第一次渲染时会使用该值，之后的重新渲染会忽略该值(即如果传入的是个函数也不会被执行)而是用传给setCount(newValue)的新值，因此count拿到的是个上一次set的新值；更新state的变量是总是替换它而不像class组件的是合并，可以使用函数式的setState结合展开运算符达到这种效果如setCount( (state) => [...state, ...newStates])；setCount的第一个参数除了是数值外还可以是函数(state)=>{ return newVal}，setCount( state => state+1);这里的state是React内部传过来的对应着'count'的当前最新值，这在某些情境下很有用，如在一个useEffect中不想受重渲染的影响生成新effect而使用空依赖列表且同时使用state'count'的时候；

function FnComp(){
    var [count, setCount] = React.useState(0);
    function changeCount(){
        setCount(count + 1);
        //setCount( state => state+1;);
    }
    return <div onClick={setCount}>{state}</div>
}

function FnComp1(){
    var [count, setCount] = React.useState(0);
    useEffect(()=>{
        const id = setInterval(()=>{
            setCount(c => c + 1);//不用这样形式：setCount(count + 1);
                                 //因为当使用空列表时，可以认为依赖项不管何时都没有变化，
                           //useEffect也就没有替换上一次的effect，因此count的值还是初始值；
        }, 1000);
        return ()=> clearInterval(id);
    }, []); //
    return <div>count</div>
}

useEffect: useEffect的使用：useEffect(create, ?deps);第一个参数一定是个函数，可以认为它是个effect，在该函数中执行一些副作用的操作，比如操作DOM元素、异步获取数据、订阅等，该函数可选返回一个函数作为函数组件重渲染前清除副作用如取消订阅、移除事件监听器等；第二个参数是依赖列表，它是个数组，每个元素有可能是state或者props，React会比较该数组在两次渲染的值，若任何一个元素改变了，useEffect都会用新的effect替换之前的effect并执行上一次的取消effect的函数；比较规则使用Object.is，这表示若元素中有对象且对象的指向不一致则表示依赖项改变了；组件第一次渲染时不需要做比较；useEffect的功能相当于class组件的componentDidMount、componentDidUpdate、componentDidWillUnmount的组合；useEffect在每