React Hook 学习

1. 使用函数式组件时需要将组件申明为React.FC类型，也就是 Functional Component 的意思，另外props需要申明各个参数的类型，然后通过泛型传递给React.FC。
   React.FC 的方式还支持 children 的传入，即使在我们的类型中并没有定义它：并不需要把所有参数都显示地解构
2. useEffect(,)没有参数时， 每次都执行， useEffect(,[])， 只执行一次， useEffect(,[variable]), 根据变量变化， 决定是否执行
3. createRef 每次渲染都会返回一个新的引用, 用于类组件中， useRef相同的引用， 用于函数式组件中， useref用于访问DOM节点，或者React元素•保持可变变量
4. useMemo 做类似的事情，假设有大量方法，并且只想在其参数更改时运行它们，而不是每次组件更新时都运行它们, useMemo 和 React.memo 的区别就是：前者在某些情况下不希望组件对所有 props 做浅比较，只想实现局部 Pure 功能，即只想对特定的 props 做比较，并决定是否局部更新

代码中有对象， 当页面渲染时， 代码会生成有新的内存地址的对象，那么就算带着memo的Child组件，也会跟着重新render， 尽管最后其实Child使用到的值没有改变！

useMemo 和 React.memo 的区别就是：前者在某些情况下不希望组件对所有 props 做浅比较，只想实现局部 Pure 功能，即只想对特定的 props 做比较，并决定是否局部更新

5. useCallback 的真正目的还是在于缓存了每次渲染时 inline callback 的实例
   useMemo 和 useCallback 接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于 useMemo 返回的是函数运行的结果， useCallback 返回的是函数。
   useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

6. seReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action

7. useContext
   简单来说 Context 的作用就是对它所包含的组件树提供全局共享数据的一种技术, 需要注意的是useContext和redux的作用是不同的！！！
   useContext：解决的是组件之间值传递的问题
   redux：是应用中统一管理状态的问题
   但通过和useReducer的配合使用，可以实现类似Redux的作用。

8. useEffect(create, deps):

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。

useLayoutEffect(create, deps):

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

useEffect 在渲染时是异步执行，并且要等到浏览器将所有变化渲染到屏幕后才会被执行。useLayoutEffect 在渲染时是同步执行，其执行时机与 componentDidMount，componentDidUpdate 一致

建议将修改 DOM 的操作里放到 useLayoutEffect 里，而不是 useEffect

React 内置的 Hook
useState 状态管理

useEffect 生命周期管理

useContext 共享状态数据

useMemo 缓存值

useRef 获取 Dom 操作

useCallback 缓存函数

useReducer redux 相似

useImperativeHandle 子组件暴露值/方法

useLayoutEffect完成副作用操作，会阻塞浏览器绘制

​
import { useState, useEffect } from ‘react’;
​
export default () => {
   const [num, setNum] = useState(0)
   const [count, setCount] = useState(1)
​
   useEffect(() => {
       //默认会执行  
       // 这块相当于 class 组件 生命周期的 compoentDidmount compoentDidUpdate
       console.log(num: ${num})
       console.log(count: ${count})
​
       // 组件在卸载时，将会执行 return 中内容
       return () => {
           // 相当于 class 组件生命周期的 componentWillUnMount
           console.log(‘测试’)
      }
  }, [num])
​
   return (
       

           

{num}

           <button onClick={() => { setNum(num + 1) }}> 更新Num
           

---

           

{count}

           <button onClick={() => { setCount(count + 1) }}> 更新Count
       

  )
}

export default 和 export 区别：
1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3.在一个文件或模块中，export、import可以有多个，export default仅有一个
4.通过export方式导出，在导入时要加{ }，export default则不需要