React Hook之useState

React的函数式组件式本身是没有状态的和其他类似于class组件的功能，所以一开始，函数组件一般只作为容器组件存在，用来展示父级组件传入的值。而16.8之后出现的 hooks(钩子)，打开了函数式组件的新大门。

useState

作用：用来记录函数式组件的状态。

使用方式：

import React, { useState } from 'react'
const [n, setN] = React.useState(0)

例子：

import React, {useState} from 'react';
import ReactDom from 'react-dom'

const App = ()=>{
        console.log("页面刷新了")
    const [count,setCount] = useState(0)
    const add = ()=>{
        setCount(count+1)
    }
    return (
        <div>
            <div>{count}</div>
            <button onClick={add}>+1</button>
        </div>
    )
}

ReactDom.render(<App/>,document.querySelector("#root"))

其它示例：

hooks 中再也不需要this的概念了，并且必须放到函数组件内部最外层、最上面引入 useState 和 useEffect 

import React, { useState, useEffect } from "react";

useState 

先看一个例子：

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

其实就是es6的数组解构

 useState(params) 设置 第一个参数的初始值 

count 是解构出的第一个参数 

setCount 是第二个参数 是一个函数 用来设置count 

可以这么操作 setCount(count + 1); 这样 count 设置称为最新的值

useEffect  

它接受2个参数，第一个是函数，第二个是数组

如果第二个参数数组为空 它就是componentDidMount 只有第一次渲染

如果二个参数数组 里面的值 设置的 值改变 它就是componentDidUpdate 只要值改变了 他就渲染

useEffect 内部 最外层 支持return () =>  相当于 componentWillUnmount 卸载 来开当前组件的时候触发 并且 每次更新 都触发

对了 useState 和 useEffect  支持写多个，例如：

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

useEffect(() => {

},[])

useEffect(() => {

},[xxx])

总结

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

React 16.8.0 正式增加了 Hooks ，它为函数组件引入了 state 的能力，换句话说就是使函数组件拥有了 Class 组件的功能。React.useState() 返回的第二个参数 setState 用于更新 state ，并且会触发新的渲染。同时，在后续新的渲染中 React.useState() 返回的第一个 state 值始终是最新的。为了保证 memoizedState 的顺序与 React.useState() 正确对应，我们需要保证 Hooks 在最顶层调用，也就是不能在循环、条件或嵌套函数中调用。React.useState() 通过 Object.is() 来判断 memoizedState 是否需要更新。