什么是Hooks？
Hooks是react行将推出的功用，它许可您在不编写类的情况下运用状况和其他React功用。
我的明白就是能够用写无状况组件的体式格局去编写具有状况的组件。
遗憾的是，正式版16.7.0出了以后并没有hooks，假如须要体验还需下载next版本，如今是16.7.0-alpha.2

npm i react@next
此次与人人分享四个Hooks，个人认为这几个应该是以后事情中会常常运用到的。

 1. useState
 2. useEffect
 3. useReducer
 4. useMemo

1.useState
个人觉得这个钩子是重点，运用它即可做到用函数的编写带有状况的组件。

import React,{ useState，useEffect } from 'react'
const HookTest = () => {
    const [obj,setValue] = useState({key:'count',value:0});
    const handleChange = () => {
        const value = obj.value+1;
        //转变状况
        setValue(Object.assign(obj,{value}));
    }
    return (
        <div>
             {obj.key}:{obj.value}
             <p>
                <button onClick={handleChange}>累加</button>
             </p>
        </div>
    )
}

很明显，重点在于const [obj,setValue] = useState({key:’count’,value:0})这一句，useState是个函数，吸收一个状默许值，返回一个数组，第一个元素为状况，初始值为传入函数的默许值，第二个元素为要领，可运用此要领转变状况的值。

2.useEffect
这个钩子，官方所说是componentDidMount，componentDidUpdate和componentWillUnmount这三个生命周期的连系，由于组件挂载完成时会实行，更新时会实行，卸载时会实行，接上面的HookTest组件，往里增添

useEffect(()=>{
    console.log('obj->',obj);
    return ()=>{
        console.log('卸载时..');
    }
});

这就是一个基础用法，挂载、更新、卸载都邑打印obj对象，return的函数，作为组件更新或许卸载时实行，比如在运用setinterval,能够在return的函数里写clearinterval。
假如只想让它实行一次的话，能够往函数里增添第二个参数。

useEffect(()=>{
    console.log('obj->',obj);
},false);

如许只在挂载完成时实行一次，第二个参数能够为false、[]、{}、””
假如想让他有条件的实行，能够往第二个参数传入详细的参数

useEffect(()=>{
    console.log('obj->',obj);
},{obj.value});

假如obj.value值变化时，就实行，没变化时就不实行，关于机能优化异常友爱。

3.useReducer

假如运用过redux的童鞋们不会默许，将须要的状况保存到一个对象中，可供一切的组件运用。
先上代码

import React, { useReducer,useMemo,useEffect,useState } from 'react';
//建立reducer，reducer可在外部建立然后再引入
function reducer(state = { count: 0 }, action) {
    switch (action.type) {
        case 'reset':
            return { count: 0 };
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count <= 0 ? 0 : state.count - 1 };
        default:
            return state;
    }
}
//组件
const useReducerDemo = () => {
    const [state, dispatch] = useReducer(reducer, { count: 0 }, { type: 'increment' });
    //异步增添
    const asyncIncrement = () => {
        setTimeout(()=>{
            dispatch({ type: 'increment' })
        },2000);
    }
    return (
        <div>
            <p>
                <span>Count: {state.count}</span>
                <button onClick={() => dispatch({ type: 'reset' })}>复原</button>
                <button onClick={() => dispatch({ type: 'increment' })}>+</button>
                <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
                <button onClick={asyncIncrement}>async+</button>
            </p>
        </div>
    )
}

能够看到，和useState很像，也是运用一个数组解构接收返回的值。
先说返回的值：
1.state
天然为reducer的状况
2.dispatch
这个是一个函数，有dispatch就意味着我们能够不必像运用redux时还须要本身下中间件（如redux-thunk）就可以够举行异步操纵，详细看asyncIncrement函数,参数为一个对象，指定须要实行的action
再说useReducer函数的参数：
第一个参数为你引入的reducer，第二个参数为state的默许值，第三个参数为初始触发的action，就是载入时默许就实行一个action

4.useMemo
useMemo只有当个中一个输入发生变化时，才会从新盘算影象值。此优化有助于防止在每一个衬着上举行高贵的盘算。
此钩子也是有助于机能优化，接入上面的useReducerDemo组件，往里增添

const [tips,setTips] = useState(false);
//当为0时提醒不能再减了
useEffect(()=>{
    if(!state.count){
        setTips(true);
    }else{
        setTips(false);
    }
});
const memoizedValue = useMemo(() => {
    console.log('useMemo run');
    return tips
}, [tips]);

在return组件元素div里增添

{
    memoizedValue && <p>不能为负数哦</p>
}

以上新增的代码时为了实如今reducer里的count小于即是0或从0变更为其他数字时更新true或false，以此到达p元素的显现与否，不然一向为上一次盘算获得值，我们运用了console.log(‘useMemo run’);纪录它更新的次数，当count从0一向+1，只会打印一次’useMemo run’，由此申明，只在0变成1的时刻实行了一次，今后memoizedValue的值一向为0变成1时所return的值。
此例子并申明不了什么，不过当有很巨大盘算量的时刻就可以体现出useMemo的作用了。
useMemo一样也是一个函数，接收两个参数，第一个参数为函数，第二个参数为要比对的值，返回一个值。
第二个参数里能够传入多个值，如[a,b,c,…]，当传入的这些值有变化时，就会去实行第一个传入的函数，依据营业需求盘算后返回终究效果。
同理，第二个参数传入的值没有更新时，不会实行。

末端
花了一下昼的时候体验hook，其他的钩子也运用了个遍，觉得这四个在我看来和在我公司营业里可能会大批的运用到，所以发此文章分享，也为纪录，本人新手前端一枚，第一次写文章，有说的不对的处所还请请多多指教。
感谢人人的浏览。
以上代码的github地点为react-hooks初体验