React hooks

1.为什么要用hooks

• 提高组件的复用简易程度
• 相比较高阶组件和渲染属性没有复杂的层级嵌套
• 不用担心this指向的问题
• 代替类组件中的生命周期，增加代码可读性

2.常用的hook

(一) useState 

作用：useState是react自带的一个hook函数，它的作用就是用来声明状态变量。

参数：useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前当前的状态值，第[1]项是可以改变状态值的方法函数。

语法： 

  const [count, setCount] = useState(0);

使用：读取状态 {count} ,更改状态setCount（count + 1 ）

(二) useEffect

作用：能够代替componentDidMount，componentDidUpdate和componentWillUnmount这三个生命周期。

• 不带参数：第一次和每次更新都会执行（componentDidUpdate）

    useEffect(()=>{ console.log('首次，每次更新'); })

• 带参数：制定参数变化时调用

 useEffect(()=>{ 
        console.log('依赖data的变化'); 
    },[data])

• 传入空数组：只运行一次的 effect（仅在组件挂载和卸载时执行componentDidMount）

 useEffect(()=>{ 
        console.log('首次进入调用'); 
    },[])

• 返回函数：卸载的时候执行返回函数（componentWillUnmount）

 useEffect(()=>{ 
        return ()=>{
            console.log('卸载之后');
        }
    },[])