React-Hooks 和 React-Redux

注：Redux最新用法参考 个人React专栏 react 初级学习

Hooks基本介绍-------------------------

• Hooks：钩子、钓钩、钩住， Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性 ，是 React v16.8 中的新增功能

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

  • 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

• 注意：Hooks 只能在函数组件中使用，自此，函数组件成为 React 的新宠儿

React v16.8 版本前后，组件开发模式的对比：

• React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)

• React v16.8 及其以后：

  1. class 组件(提供状态) + 函数组件(展示内容)

  2. Hooks(提供状态) + 函数组件(展示内容)

  3. 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件

总结：

注意1：虽然有了 Hooks，但 React 官方并没有计划从 React 库中移除 class

注意2：有了 Hooks 以后，不能再把函数组件称为无状态组件了，因为 Hooks 为函数组件提供了状态

为什么要有 Hooks

• 组件的状态逻辑复用

  • 在 Hooks 之前，组件的状态逻辑复用经历了：mixins（混入）、HOCs（高阶组件）、render-props 等模式

  • （早已废弃）mixins 的问题：1 数据来源不清晰 2 命名冲突

  • HOCs、render-props 的问题：重构组件结构，导致组件形成 JSX 嵌套地狱问题

• class 组件自身的问题

  • 选择：函数组件和 class 组件之间的区别以及使用哪种组件更合适

  • 需要理解 class 中的 this 是如何工作的

  • 相互关联且需要对照修改的代码被拆分到不同生命周期函数中

  • 相比于函数组件来说，不利于代码压缩和优化，也不利于 TS 的类型推导

注意：

之前的react语法并不是以后就不用了，class 组件相关的 API 在hooks中可以不用

• class 自身语法，比如，constructor、static 等
• 钩子函数，componentDidMount、componentDidUpdate、componentWillUnmount
• this 相关的用法

useState-Hooks

useState-基本使用

• useState作用：为函数组件提供状态（state）,不能在类组件中调用

• useState使用场景：当你想要在函数组件中，使用组件状态时，就要使用 useState Hook 了

• 约定：修改状态的函数名称以 set 开头，后面跟上状态的名称

• 多次调用 useState 多个状态和修改状态的函数之间不会相互影响

• useState 提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用

• 每次渲染，useState 获取到的都是最新的状态值(react会记住最新的状态值),useState 的初始值(参数)只会在组件第一次渲染时生效。

语法：

import { useState } from 'react'

// 参数：状态初始值可以是任意值
// 返回值：stateArray 是一个数组
const stateArray = useState(0)

// 索引 0 表示：状态值（state）
const state = stateArray[0]
// 索引 1 表示：修改状态的函数（setState(newValue)` 是一个函数，参数表示：*新的状态值*）
const setState = stateArray[1]

状态的读取和修改：

• 读取状态

const Counter = () => {
  const [user, setUser] = useState({ name: 'jack', age: 18 })
  
  return (
      <div>
        <p>姓名：{user.name}</p>
            <p>年龄：{user.age}</p>
    </div>
  )
}

• 修改状态
  • 调用该函数后，将使用新的状态值替换旧值
  • 修改状态后，因为状态发生了改变，所以，该组件会重新渲染
  • setUser(newValue) 是一个函数，参数表示：新的状态值 。调用这个函数，新的状态值会覆盖原来的状态值，所以，这里和class的setState不一样，区分一下，class的setState需要修改哪个值就传哪个值，内部会做状态的合并，hooks呢修改状态值会直接覆盖不会合并，所以hooks修改状态值需要先对原来的值进行取值解构，再修改。

const Counter = () => {
  // 利用数组解构提取状态和修改状态
  const [user, setUser] = useState({ name: 'jack', age: 18 })
  
  const onAgeAdd = () => {
    setUser({
      ...user,
      age: user.age + 1
    })
  }
  
  return (
  	<div>
    	<p>姓名：{user.name}</p>
			<p>年龄：{user.age}</p>
     	<button onClick={onAgeAdd}>年龄+1</button>
    </div>
  )
}

useState-使用规则