react hooks learn

记录：

setCount(prevCount => prevCount - 1)，set方法并不只能传入一个普通变量，还能传入一个函数，第一个参数为执行函数组件这一刻的count的值。

Function Component 入门

• 什么是FC

  • 一个返回了jsx的函数，就可以当做React组件。这样的函数称为FC
  • Function Component 仅描述 UI 状态，React 会将其同步到 DOM，仅此而已。

• 什么是hooks

  • 辅助FC的工具，比如useState用于管理状态，useEffect用于管理副作用
  • useState产生的数据是Immutable的，通过set函数设置后，会形成新的引用在下次渲染时。
  • 但是useState的读取无法通过this，所以可以理解每次渲染都是每一帧，每个数据都是一个新的引用
  • 可以通过useRef解决，useRef创建的对象，其值只有一份，并且在每次render之间共享
  • useEffect是处理副作用的，执行时机在每次render渲染完毕之后。
  • 只需要函数遵循use开头，返回非jsx元素即自定义hooks
  • capture value快照值
  • 由于useEffect中使用到的变量一定要写入第二个依赖参数中，所以要将函数写在useEffect内部
  • useCallback,useEffect,useMemo等第二个参数中的依赖项能解决性能问题，比如传递给子组件的方法等，无需再在子组件中调用componentDidUpdate等生命周期去判断了。这样很方便的解耦。每一处函数只要关心自己的依赖即可。

react中文官网

• hook简介

  • 没有破坏性改动，和class组件完美兼容

  • 动机：

    • 组件之间复用状态逻辑很难
    • 复杂组件难以理解（逻辑分离）
    • 难以理解的class

• hook概览

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

  • hook使用规则：

    • 只能在函数最外层调用hook
    • 只能在React的函数组件和自定义hook中调用

  • 自定义hook

    • 在不增加组件的情况下做到组件之间复用逻辑
    • 每次的自定义hooks调用都拥有完全独立的state，因此可以在单个组件中调用同一个hook

• effect hook

  • react更新DOM之后运行的额外代码
  • 默认情况下，在第一渲染之后和每次更新之后都会执行
  • 每次的effect的执行都属于那一次特性的渲染。（函数中涉及的变量都是那一次渲染的变量）
  • effect 更像是渲染结果的一部分 —— 每个 effect “属于”一次特定的渲染

• hook规则

  • react是通过hook的调用顺序得知哪个state对应哪个useState
  • 正是上面原因，不能将hook放入if等判断中，会导致react无法作出对应判断

• 自定义hook

  • 自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook
  • 自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性。
  • 两个组件使用相同的Hook不会共享state，每个Hook的state和副作用等都是隔离的
  • hook本身就是函数，可以直接将参数传递进入