react hooks 使用

hooks 是react 16.8 引入的特性，他容许你在不写class的状况下操做state 和react的其余特性。
hooks 只是多了一种写组件的方法，使编写一个组件更简单更方便，同时能够自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。

基本用法

import React, { useState } from 'react'

export default function () {
    const [count, setCount] = useState(0)
    return <div>
        <button onClick={() => {
            setCount(count + 1)
        }}>+</button>
        {count}
        <button onClick={() => {
            setCount(count - 1)
        }}>-</button>
    </div>
}

hook 使用起来很是的简单，上面咱们就写使用 useState hook 的函数组件，useState函数返回了一对值一个是state的值另外一个是更新state的函数，咱们在点击按钮的时候调动更改state的函数，最终从新渲染ui

hook 在class中不起做用

Hook 是什么

Hook 是什么？ Hook 是一个特殊的函数，它可让你“钩入” React 的特性。例如，useState 是容许你在 React 函数组件中添加 state 的 Hook。稍后咱们将学习其余 Hook。

何时我会用 Hook？ 若是你在编写函数组件并意识到须要向其添加一些 state，之前的作法是必须将其它转化为 class。如今你能够在现有的函数组件中使用 Hook。

State hook

state hook的主要做用就是获取须要的 state 和 更新state的方法

使用方法

const [state, setState] = useState(initialState);

参数： initialState 能够直接是当前state的初始值，也能够是一个函数，函数的返回值将做为state的值，参数只会在组件的初始渲染中起做用

返回值：返回的是一个数组，一个是当前state的值，另外一个是更新state的方法，这里面setState方法与class中的setState不一样在于，此setState 不会合并state 中的值

若是须要定义多个state 只须要屡次调用useState 方法就行。

Effect hook

useEffect方法是在每次渲染以后执行，能够理解为class写法中的 componentDidMount / componentDidUpdate（为了方便理解能够这么理解，但不彻底同样）

useEffect(didUpdate);

参数：function，在每次渲染以后执行，在函数里能够编写更新dom ，添加订阅 等。

参数返回值： function(能够不返回) 若是 didUpdate函数中返回了一个函数，这个函数会在组件卸载前执行(每次渲染都会执行)须要清除上次订阅的内容能够再这里面写。

执行条件： useEffect 的第二个参数是一个数组，只有当数组中的的值发生改变的时候才会调用effect，若是执行在第一次挂载和卸载的时候调用，只须要传一个[]空数组

useContext

const value = useContext(MyContext);

获取context 的值，相似于clss 写法中的static contextType = MyContext ,当使用了useContext会在context 的值发生改变的时候从新render。

参数 接收对象是React.createContext 的返回值
返回值 context 里的内容

若是对context 不了解能够看 context 学习

自定义 hook

当咱们想在两个函数之间共享逻辑时，咱们会把它提取到第三个函数中。而组件和 Hook 都是函数，因此也一样适用这种方式。

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部能够调用其余的 Hook