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 是否需要更新。

React Hook之useState

原文：https://www.cnblogs.com/samve/p/13817836.html