React Hooks学习笔记

1.React设计哲学

1.单向数据流（数据页面绑定，单向渲染--->UI=f(x)）

2.虚拟dom

3.组件化（一致性，方便协作）

常见hooks

useState：最常用，替代先前的setState

useEffect：用来实现Component的生命周期

useContext：使用React ContextAPI

useReducer：用于复杂的状态管理

useRef：存储易变数据，通常用于访问DOM元素

useMemo+useCallBack：缓存+优化组件性能

由于函数组件中没有生命周期方法，hooks的作用是代替类组件中的生命周期方法

useState

在useState方法中设置初始值

结构数组，有两个参数：state与setState方法

setState常用的方式：是使用setState（prev=>）

diff算法

对于经常变化的元素，提供key进行标记

2.useEffect

在函数组件中使用hooks可以模拟类组件生命周期函数的功能

useEffect在组件状态变化时会自动执行

useEffect用于监听state的变化然后执行回调函数

useEffect的第二个参数控制执行循环与监听对象

回调函数的返回值也可以是一个函数，用于“清理”工作

3.useContext

Context其实就是上下文，用于将父组件属性传递给子组件

4.useReducer

userReducer可以统一管理页面的数据

5.useRef

useRef可以同来绑定dom节点

6.useMemo和useCallback

useMemo通过依赖的值计算得出一个新的值

useCallback 在父子组件中，子组件需要父组件提供的事件，可以通过useCallback绑定某个状态值来减少子组件的重复渲染，优化性能，只要useCallback绑定的值没有发生变化，子组件就不会重新渲染

7.自定义hook

hooks必须用use打头，react用于校验