hooks是什么？

Hooks：钩子、钓钩、钩住。

是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

作用：为函数组件提供状态、生命周期等原本在Class 组件中才提供的功能

Hooks 只能在函数组件中使用
可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

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

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'))