state数据的定义和使用

核心四步

第一步:导入useState模块import React , { usestate 3 from 'react
第二步，定义slate数据 //说明;//[第一个梦龄是案义的空量名,第二个梦数是修改要量的方决] seStare(任意类型的数滑，你变量量的初州值)cunst [mum,setNum7=usestate(0);//num = 0
第三步：使用数据
第四步修改数据的方法

useEffect

useEffect():函数组件的生命周期西数，相当于类组件的componentDidMount、componentDidUpdate、componentwillUnmount

useEffect(()=>//具体的逻舞 -- 网络请求、收居工作等return ()=>},[变最1,变量2,...])

套数说朋
第一个参数的返同值，和第二个参数郭可以省略
省略第二个参数，useEffect剂当componentDidMount、componentDidUpdate，执行次数不限 
当第二个象数是 一个个[],useEffect当]componentDidMount,组件首次渲染完毕执行: 当数据据修改时，不在执行
当第二个券数[ 变最1，量2,...],useeffect 第四次进入页面行，当依赖项改时也会用次执行

useEflect 做了什么：通过使用这个 Hook，你可以告诉 Reatt 组件需要在渲染后执行某些操作
为什么在组件内部调用 useEffect：将 useEffect 放在组件内部让我们可以在 efect 中自接访同count state 变量(或他 props)
useEffect 会在每次清后部执行吗：是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行

useRef

返回一个可变的 ref 对象，其current 属被初始化为传入的参数(initalValue) 。返回的 ref 对象在组件的整个生命周期内保持不变

Reducer Hook

useState 的替代方案。它接收一个形如state, action) => newState 的 reducer，并返回当前的state 以及与配套dispatch 万法

导入 import React，{ useReducer, usestate } from "react
调用useReducer方法

const [state，dispatch] = useReducer(reducer,init);
参数说明:
@ state:状态，变量名
@ dispatch():用于更新 state 并触发组件的重新染。它需要传入一个 action 作为参数
reducer:
进行分支判断的函数，用于更新 state 的纯函数。
参数为 state 和 action，返回值是更新后的 state。
state 与 action 可以是任意合法值。
function reducer(state ,action)freturn newstate }1. state:初始值
2.action: action: 用户执行的操作。可以是任意类型的值。通常来说 action 是一个对象，其中type 属性标识类型，其它属性携带额外信息。{type: add',payload:103
3.newstate: 返回一个新状态init:state的初始值

useCallback(记忆函数)

useca11back 是一个允许你在多次渲染中缓存函数的 React Hook。防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次。

语法const cachedFn = useCa11back(fn，dependencies)
fn: 想要缓存的函数。此函数可以接受任何参数并且返回任何值。React 将会在初次染而非调用时返回该函数。当进行下一次渲染时，如果 dependencies 相比于上一次渲染时没有改变，那么 React 将会返回相同的函数。否则，React 将返回在最新一次渲染中传入的函数，并且将其缓存以便之后使用。React 不会调用此函数，而是返回此函数。
dependencies:有关是否更新 fn 的所有响应式值的一个列表。响应式值包括 props、state，和所有在你组件内部直接声明的变量和函数。

useMemo

useMemo 是一个 React Hook,它在每次重新渲染的时候能够缓存计算的结果。useCallback的功能完全可以由useMemo所取代，如果你想通过使用useMemo返回一个记忆函数也是完全可以的。

语法 const cachedValue = useMemo(calculateValue， dependencies)
calculatevalue: 要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React 将会在首次渲染时调用该函数; 在之后的染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculatevalue 并返回最新结果，然后缓存该结果以便下次重复使用。
dependencies: 所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props.state 和所有你直接在组件中定义的变量和函数。
区别 唯一的区别就是: useCallback不会执行第一个参数函数，而是将它返回给你，而useMemo会执行第一个函数并且将函数执行的结果返回给你。所以useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而useMemo更适合经过函数计算得到一个确定的值，比如记忆组件。

Context Hook

context让一个组件从远处的父组件接收信息，而不需要将其作为 props 传递。比如，app 的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们层级多深。

useCantext 读取并订阅一个 context

总结笔记

usestate声明了一个你可以直接更新的state变量。
useReducer声明了一个带有更新逻辑的state 变量在一个 reducer 函数中
useContext读取并i订阅一个 context。
useRef 声明一个ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。
useEffect 将一个组件连接到外部系统
useMemo 让你缓存一个代价非常高的计算结果
useCa1back 让你在将一个函数定义传递给一个优化的组件之前缓存它

React Hooks