快速掌握React Hooks

你觉得react hooks简单吗？
你看过react官方文档吗？
你的同事、前辈、领导有没有教你用class Component的生命周期来类比hooks的执行时机？
这个方法一点都不好，首先这个方法根本没有办法准确的类比，其次随着react18的到来会有个新的API-OffScreen可能对Hooks的执行时间造成影响，到时候更没有办法准确类比了
今天从一个全新的角度学习Hooks，不需要文档、不需要生命周期，你只只要一个初中的数学知识：

import {useState, useMemo, useCallback} from 'react'
export default function App() {
  const [x , setX]= useState(0)
  //const y = 2*x + 1
  const y = useMemo(()=>2*x+1, [x])//useMemo包裹因变量y，显示的指定该因变量依赖的自变量
  //用callback用来缓存一个函数类型的因变量，也需要显示的指定该因变量依赖的自变量
  const changeX = useCallback(()=> setX(x+1), [x])
  //const changeX = () => set(x+1)
  //使用hooks显示的指明因变量有什么好处呢？
  //当使用时。y与changeX会被缓存下来，只要X不变，始终读取的是缓存的值，
  //不使用时，每次函数组件执行时,实际会基于x创建新的y与changeX，这涉及到react的性能优化
  return (
    <ul onClick={changeX}>
      <li>{x}</li>
      <li>{y}</li>     
    </ul>
  )
}

组件的功能不仅局限于描述视图，还能产生副作用，副作用是函数式编程中的概念，对于一个函数，如果固定的输入一定会产生固定的输出， 例如： y=2x+1，这就是个纯函数，但是当我们引入随机数z， y=2x+1+z，x一定时，输出却不是一定的，我们就可以说这个函数是包含副作用的，在函数组件中，可以通过useEffect来定义有副作用的因变量，假设我们希望当x变化后，将当前页面的标题修改为X的值，改变标题这个行为就属于副作用，除此之外，比如请求数据，操作DOM，这些都属于副作用，我们都可与使用useEffect来处理

useEffect=(()=> {
  document.title = x

},[x])


//当我们触发onclick事件时，x变化后，执行回调函数changeX，最终不仅视图变化。title也跟着变化，
//可见自变量导致因变量变化后，因变量不仅可以作用于视图，也能触发副作用，

useRef-标记变量，可以作用于自变量与因变量的不同路径中，是个单纯的保存标记，无论是自变量还是因变量，仅仅是在路径中起到缓存数据的作用

const renderCountRef = useRef(1)
const isOdd = renderCountRef.current % 2
renderCountRef.current ++ 

return (
  <div>{isOdd ? <div><Count data={x}/></div> : null} </div>
)

总结： react hooks的本质是自变量与因变量，其中useState用来定义自变量，useMemo与useCallback定义无副作用的因变量，useEffect定义有副作用的因变量，useRef是biaoji变量，为了方便操作更多的自变量，有了useReducer、为了跨组件层级的操作自变量，有useContext，最后为了让组件逻辑更灵活，有了useRef。

以上是kasong老师学习笔记，简洁明了，大佬牛皮！