React知识体系，逐步迭代

React知识体系，逐步迭代 计算机 编程，React是用于构建用户界面的JavaScript库，主要用于构建用户界面，React的核心概念是组件化。

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样式基础