什么是Hooks

Hooks let you use state and other React features without writing a class.

类组件的不足

1. 状态逻辑难以复用：缺少复用机制，渲染属性和高阶组件导致层级冗余
2. 趋向复杂难以维护: 生命周期中混杂不相干的逻辑，相干逻辑分散在不同什么周期
3. this指向困扰：内联函数过度创建新句柄，类成员函数不能保证this的指向

Hooks的优势

1. 函数组件无this问题
2. 自定义Hook方便复用状态逻辑
3. 副作用的关注点分离

声明

按照约定，所有的hooks函数都应该以use开头

useState()

import React, { Component, useState } from 'react'

useState

1. useState()返回一个变量，

如果一个组件有多个state，那么useState怎么知道哪一次调用返回哪一个state

按照第一次运行的次序返回

eslint-pulgin-react-hooks

1. 安装

npm install eslint-pulgin-react-hooks -D

2. 增加配置

  "eslintConfig": {
    "extends": "react-app",
    "plugins": "react-hooks",
    "rules": {
      "react-hooks/rules-of-hooks": "error"
    }
  },

如果count的值是1，给setCount(1),组件会不会重新渲染？？？

副作用

1. 绑定事件
2. 网络请求
3. 访问DOM

副作用的调用时机

1. Mount之后 ComponentDidMount
2. Update之后 ComponentDidUpdate
3. Unmount之前 ComponentWillUnmount

在react hooks中都可以使用useEffect代替

1. useEffect的第二个参数是一个数组，数组的每一项都不变的情况下，
2. 不传数组意味着每次渲染后都执行
3. 传入空数组，只会执行一次

useContext()

// 创建Context
const CountContext = createContext()
function Counter() {
  const count = useContext(CountContext)
  return (
    <h1>{count}</h1>
  )
}

useMemo

import React, { useMemo, useState } from 'react'
function Counter(props) {
  return (
    <h1>{props.count}</h1>
  )
}
function App() {
  const [count, setCount] = useState(0)
  //调用时机
  const double = useMemo(() => {
    return count * 2
  }, [count === 3])

  const half = useMemo(() => {
    return double / 2
  }, [double])
  return (
    <div>
      <button
        type='button'
        onClick={() => { setCount(count + 1) }}
      >
        Click:{count},
      double:{double}
      </button>
      <Counter count={count} />
    </div>
  )
}
export default App

渲染属性

高阶组件

useEffect只要在数组成员都不变的情况下才会运行副作用，那这个不变指的是什么

Context Hooks

useContext