React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)
React v16.8 及其以后：
1. class 组件(提供状态) + 函数组件(展示内容)
2. Hooks(提供状态) + 函数组件(展示内容)
3. 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件

为什么要有 Hooks?

两个角度：1.组件的状态逻辑复用 2.class 组件自身的问题

react组件的本质

React 是用于构建用户界面的 JavaScript 库。

React组件是对特定功能的封装，主要用来对UI进行拆分。

React 组件的模型其实很直观，就是从 Model 到 View 的映射，这里的 Model 对应到 React 中就是 state 和 props

公式：组件（State+Props） = UI

class 组件自身的问题

在根据状态来渲染UI这件事上，class 组件并没有发挥它最重要的功能：

组件之间很少继承
组件之间很少相互访问

函数式组件的好处

函数本身比较简单，更好的胜任根据状态来渲染UI这件事
hooks让函数组件内部有了维护状态的能力
hooks带来了组件的逻辑复用能力

hooks的使用策略

react没有计划从React中移除class
Hook 和现有代码可以同时工作，你可以渐进式地使用：
1. 不推荐直接使用 Hooks 大规模重构现有组件
2. 推荐新功能用 Hooks，复杂功能实现不了的，也可以继续用 class
3. 找一个功能简单、非核心功能的组件开始使用 hooks
class 组件相关的 API 在hooks中可以不用
1. state与setState
2. 钩子函数，componentDidMount、componentDidUpdate、componentWillUnmount
3. `this 相关的用法
原来学习的内容还是要用的
1. JSX：{}、onClick={handleClick}、条件渲染、列表渲染、样式处理等
2. 组件：函数组件、组件通讯
3. React 开发理念：单向数据流、状态提升 等

useState-基本使用

使用useState为函数组件提供状态

使用场景

当你想要在函数组件中，使用组件状态时，就要使用 useState 这个Hook 了

作用

为函数组件提供状态（state）

步骤

导入。 useState 函数
调用 useState 函数，传入初始值，返回状态和修改状态的函数
使用
1. 在 JSX 中展示状态
2. 特定的时机调用修改状态的函数来改状态

示例

import { useState } from 'react'
//  useState 是hook，hook是use开头的函数
const Count = () => {  
  // 0 是初始值
  // 返回值是一个数组
  const stateArray = useState(0)

  // 状态值 -> 0
  const state = stateArray[0]
  // 修改状态的函数
  const setState = stateArray[1]

  return (
    <div>
      {/* 展示状态值 */}
      <h1>useState Hook -> {state}</h1>
      {/* 点击按钮，让状态值 +1 */}
      <button onClick={() => setState(state + 1)}>+1</button>
    </div>
  )
}

参数：状态初始值。比如，传入 0 表示该状态的初始值为 0
- 注意：此处的状态可以是任意值（比如，数值、字符串等），而 class 组件中的 state 必须是对象
返回值：数组，包含两个值：1 状态值（state） 2 修改该状态的函数（setState）

使用数组解构简化代码

使用数组解构简化 useState 的使用。约定：修改状态的函数名称以 set 开头,后面跟上状态的名称

// 解构出来的名称可以是任意名称

const [state, setState] = useState(0)
const [age, setAge] = useState(0)
const [count, setCount] = useState(0)

useState-处理表单元素

用useState初始化内容和修改内容的方法
向input元素上设置value和onChange属性

import React, { useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [content, setContent] = useState('')
  return (
    <div>
      {content}
      <input value={content} onChange={(e) => setContent(e.target.value)} />
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

useState-setXXX回调函数格式

useState 两种格式

格式1：传入值

useState(0) useState('abc')

格式2：传入回调

useState(() => { return 初始值 })

回调函数的返回值就是状态的当前值
回调函数只会触发一次

使用场景

格式1：传入值

如果状态就是一个普通的数据（比如，字符串、数字、数组等）都可以直接使用 useState(普通的数据)

格式2：传入回调

初始状态需要经过一些计算得到。 useState(()=>{这里有一些计算， return 结果}))

setXXX的参数可以是回调

状态需要迭代累计。 setXXXXX((上一次的值) => { return 新值 })

setCount(initState => {
// ...
return newState
})

经典场景

希望state有连续叠加的效果

import React, { useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [count, setCount] = useState(0)
  const hClick1 = () => {         //点击一次 增加1,没有叠加
    setCount(count+1)        
    setCount(count+1)
    setCount(count+1)
  }
  const hClick2 = () => {          //点击一次 增加3, 可以叠加
    setCount((count)=>count+1)        
    setCount((count)=>count+1)
    setCount((count)=>count+1)
  }
  
  return (
    <div>
      count:{count}
      <button onClick={hClick1}>多次连续setCount-值</button>
      <button onClick={hClick2}>多次连续setCount-值</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

useState-组件的更新过程

函数组件没有生命周期

示例代码

import { useState } from 'react'

const Count = () => {  
  console.log('Count...')
  const [count, setCount] = useState(0)
  return (
    <div>
      {/* 展示状态值 */}
      <h1>useState Hook -> {count}</h1>
      {/* 点击按钮，让状态值 +1 */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

更新过程

函数组件使用 useState hook 后的执行过程，以及状态值的变化：

组件第一次渲染：
1. 执行该函数中的代码逻辑
2. 调用 useState(0) 将传入的参数作为状态初始值，即：0
3. 渲染组件，此时，获取到的状态 count 值为： 0

用户点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染

组件第二次渲染：
1. 再次执行该组件中的代码逻辑
2. 再次调用 useState(0)：
  1. 此时 React 内部会拿到最新的状态值而非初始值
  2. 该案例中最新的状态值为 1
3. 再次渲染组件，此时，获取到的状态 count 值为：1

useState 的初始值(参数)只会在组件第一次渲染时生效

const [count, setCount] = useState(()=>{
console.log('useState...') // 这句只会输出一次
return 0
})

也就是说，以后的每次渲染，useState 获取到都是最新的状态值。React 组件会记住每次最新的状态值!

总结

状态更新，整个组件的逻辑重新运行一次；

useState只会在组件第一次渲染时使用状态的初值，随后都会使用状态的最新值

useState 这个 Hook 就是用来管理 state 的，它可以让函数组件具有维持状态的能力。也就是说，在一个函数组件的多次渲染之间，这个 state 是共享的。

如何为函数组件提供多个状态？

两种方案

方案1：useState({状态1，状态2.....})

方案2： useState(状态1) useState(状态2)

推荐使用方案2

调用 useState Hook 多次即可，每调用一次 useState Hook 可以提供一个状态。

注意：

hooks: setXXX(新值) ==> 用新值去替换之前的值

class: setState({要修改的属性})

useState的使用规则

useState只能直接出现在函数组件内部
useState不能嵌套在 if/for/

原因: React 是按照 Hooks 的调用顺序来识别每一个 Hook，如果每次调用的顺序不同，导致 React 无法知道是哪一个 Hook。可以通过开发者工具进行查看

[react] hooks基础 =＞ useState ===

hooks是什么？

Hooks 前后，组件开发模式的对比