导图社区 React知识体系，逐步迭代
React知识体系，逐步迭代 计算机 编程，React是用于构建用户界面的JavaScript库，主要用于构建用户界面，React的核心概念是组件化。
大学计划和规划，大学四年，是人生中一个充满无限可能与挑战的宝贵阶段。为即将或正在经历这一阶段的学子们提供一份详尽而实用的指南，帮助大家从入学之初就树立明确的目标，制定合理的计划，逐步构建起扎实的专业知识体系。
经济学基础（2025中级经济师），涵盖广泛的经济学基础知识，内容结构清晰，分为多个部分或章节，针对考试的重点和难点，进行有针对性的学习和练习，提高解题能力和应试技巧。
微信公众号，主要展示了多个与心理学相关的账号及其功能特点。这些账号各具特色，涵盖了心理健康、心理疗愈、心理测评、情感交流等多个方面。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
React知识体系，逐步迭代
React官方资料
两个重要文档
学习React
API参考
英文官网
中文官网
React“谚语”
React核心价值：组件化+数据驱动视图
组件化：指将复杂的用户界面分解为一系列相互独立的、可重用的组件
数据驱动视图：指通过数据来驱动 UI 的渲染和更新
React基础知识
常见Hooks
在函数组件中添加状态：useState
const [state, setState] = useState(initialState)
接收1个初始状态作为参数，并返回1个包含当前状态和1个用于更新状态的函数的数组，通过这个数组，我们可以在组件的不同生命周期方法中获取和更新状态
参数
initialState：你希望 state 初始化的值。它可以是任何类型的值，但对于函数有特殊的行为。在初始渲染后，此参数将被忽略。
函数特殊行为：如果传递函数作为 initialState，则它将被视为 初始化函数。它应该是纯函数，不应该接受任何参数，并且应该返回一个任何类型的值。当初始化组件时，React 将调用你的初始化函数，并将其返回值存储为初始状态
返回
返回一个由两个值组成的数组
当前的 state：在首次渲染时，它将与你传递的 initialState 相匹配。
set 函数：它可以让你将 state 更新为不同的值并触发重新渲染
函数组建与外部系统同步：useEffect
const ResultValue = useEffect(setup, dependencies?)
接收1个函数
setup：处理 Effect 的函数
在组件被添加到网页的 DOM结构中时，会触发该函数，这个函数会返回一个清理函数（cleanup），用于在组件从 DOM 中移除时执行一些清理工作，比如清除定时器、解绑事件等
当组件依赖的数据发生变化时，React 会重新渲染组件，这时它会先执行你提供的 "清理" 函数（如果你提供了的话），然后再用新的数据运行 setup 函数，生成新的组件。 确保组件在依赖数据变化后能正确更新，同时在移除时不会导致内存泄漏
dependencies?：setup 代码中引用的所有响应式值的列表
响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数
返回 undefined
在函数组件中访问DOM元素：useRef
const ref = useRef(initialValue)
接收一个字符串参数（Dom元素ID，一般为null），返回一个包含所引用的 DOM 元素的对象
initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数会首次渲染后被忽略
返回一个只有一个属性的对象
current：最初，它被设置为你传递的 initialValue。之后你可以把它设置为其他值。如果你把 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性
在后续的渲染中，useRef 将返回同一个对象
函数组件重新渲染时缓存计算结果：useMemo
const cachedValue = useMemo(calculateValue, dependencies)
接收一个依赖数组和一个副作用函数作为参数，返回的是副作用函数的执行结果。当依赖数组中的元素发生变化时，useMemo 会重新执行副作用函数并返回新的结果，如果依赖数组中的元素没有发生变化，那么 useMemo 会直接返回上一次的结果，不会重新执行副作用函数
calculateValue：要缓存计算值的函数
它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React 将会在首次渲染时调用该函数；在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。
dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。
响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。如果你在代码检查工具中 配置了 React，它将会确保每一个响应式数据都被正确地定义为依赖项。依赖项数组的长度必须是固定的并且必须写成 [dep1, dep2, dep3] 这种形式。React 使用 Object.is 将每个依赖项与其之前的值进行比较。
在初次渲染时，useMemo 返回不带参数调用 calculateValue 的结果
在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；否则将再次调用 calculateValue，并返回最新结果。
优化函数组件中频繁创建的函数引用：useCallback
const cachedFn = useCallback(fn, dependencies)
接收一个函数作为参数，这个函数可以是任何类型的函数，包括同步函数和异步函数（包含 Promise 类型的函数）。然后，useCallback 会对传入的函数进行缓存，当函数引用没有发生变化时，它会直接返回缓存的函数引用，不会重新创建函数；当函数引用发生变化时，它会重新创建函数并返回新的函数引用。
fn：想要缓存的函数
此函数可以接受任何参数并且返回任何值。React 将会在初次渲染而非调用时返回该函数。当进行下一次渲染时，如果 dependencies 相比于上一次渲染时没有改变，那么 React 将会返回相同的函数。否则，React 将返回在最新一次渲染中传入的函数，并且将其缓存以便之后使用。React 不会调用此函数，而是返回此函数。你可以自己决定何时调用以及是否调用。
dependencies：有关是否更新 fn 的所有响应式值的一个列表
响应式值包括 props、state，和所有在你组件内部直接声明的变量和函数。如果你的代码检查工具 配置了 React，那么它将校验每一个正确指定为依赖的响应式值。依赖列表必须具有确切数量的项，并且必须像 [dep1, dep2, dep3] 这样编写。React 使用 Object.is 比较每一个依赖和它的之前的值。
在初次渲染时，useCallback 返回你已经传入的 fn 函数
在之后的渲染中, 如果依赖没有改变，useCallback 返回上一次渲染中缓存的 fn 函数；否则返回这一次渲染传入的 fn。
自定义Hook
CSS样式基础
