Components#xff09;和函数组件#xff08;Function

Components#xff09…React渲染过程依次遇到的函数

在React的渲染流程中从组件的创建到其UI最终呈现到屏幕上会经历一系列的生命周期方法和函数。

这些方法和函数对于类组件Class

Hooks引入后函数组件的能力得到了极大的增强。

以下是React渲染流程中可能遇到的一些关键方法和函数主要侧重于类组件同时也会提及函数组件中的相关概念。

构造函数Constructor

在类组件实例化时调用用于初始化state和绑定方法。

在React

16.3及以后的版本中通常不需要在构造函数中绑定方法因为可以在类定义中直接使用箭头函数或者使用React.memo对于函数组件来避免不必要的重新渲染。

在实例化或接收到新的props时调用用于根据props更新state。

这是一个静态方法因此不能访问组件的实例。

render方法

返回组件的React元素树这些元素描述了组件的UI结构。

这是一个纯函数给定相同的props和state应该总是返回相同的React元素。

生命周期方法

componentDidMount在组件首次挂载后立即调用适合执行副作用操作如数据获取、订阅等。

shouldComponentUpdate在接收到新的props或state之前调用用于决定组件是否需要重新渲染。

返回false可以阻止渲染过程提高性能。

getSnapshotBeforeUpdate在最近一次渲染输出提交到DOM节点之前调用返回一个值作为componentDidUpdate的第三个参数。

componentDidUpdate在更新后立即调用适合执行DOM操作或更新订阅。

componentWillUnmount在组件卸载及销毁之前调用适合进行清理工作如取消网络请求、清除定时器、取消订阅等。

对于函数组件由于没有实例化和生命周期方法的概念React引入了Hooks来提供类似的功能。

函数组件本身

每次组件的props或state发生变化时都会重新调用函数组件返回新的React元素。

React

useState用于在函数组件中添加state并返回一个状态值和一个更新该状态的函数。

useEffect用于在函数组件中执行副作用操作类似于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount。

它接受一个函数和一个依赖数组当依赖项发生变化时函数会被调用。

useContext用于让你在函数组件中订阅React上下文context。

useReducer一个更复杂的state管理Hook它接受一个reducer函数和一个初始state并返回一个state值和一个dispatch方法。

useCallback返回一个记忆化的回调函数版本该回调函数在依赖项不变的情况下不会改变。

useMemo返回一个记忆化的值它只在依赖项发生变化时重新计算。

useRef可以在整个组件的生命周期内持久化数据而不引起重新渲染。

useImperativeHandle用于在使用forwardRef时自定义暴露给父组件的实例值。

useLayoutEffect其用法与useEffect相同但它会在所有的DOM变更之后同步调用可以用于读取DOM布局并同步触发重渲染。

在浏览器执行绘制之前useLayoutEffect内部的更新计划将被同步刷新。

类组件和函数组件在React渲染流程中遇到的函数和方法有所不同。

类组件依赖于生命周期方法来执行副作用操作、更新state和进行清理工作。

函数组件则使用Hooks来提供类似的功能同时保持组件的简洁性和可重用性。

Fragment

在React中Fragment是一种特殊的组件它允许你将子元素组合在一起而不会向DOM添加额外的节点。

这对于需要在单个元素中返回多个元素但又不希望引入额外DOM结构的场景非常有用。

以下是关于React中Fragment的详细解释

组合元素Fragment允许你将多个元素组合在一起而不会破坏DOM结构。

这在React组件中很常见因为React组件通常只能返回一个根元素。

避免额外DOM节点使用Fragment可以避免向DOM添加不必要的节点从而保持DOM结构的简洁和高效。

function

(React.Fragmenth1Title/h1pParagraph

1/ppParagraph

}简写语法Fragment的简写语法是使用空的JSX标签和/。

例如

function

key属性Fragment唯一可以接受的属性是key。

当使用Fragment包裹一个元素集合并且这个集合需要通过map函数或其他方式生成时通常需要为每个元素指定一个唯一的key属性。

例如

function

key{item.id}dt{item.term}/dtdd{item.description}/dd/React.Fragment))}/dl);

}或者使用简写语法

key{item.id}{item.term}/dtdd{item.description}/dd///

注意在简写语法中key通常需要直接放在需要它的元素上而不是Fragment上。

//

上面的例子为了说明Fragment的key属性实际上在简写语法中应该这样写//

key{${item.id}-term}{item.term}/dt//

key{${item.id}-description}{item.description}/dd//

}//

*/}dt{item.term}/dtdd{item.description}/dd/React.Fragment)

({/*

key{${item.id}-term}{item.term}/dtdd

key{${item.id}-description}{item.description}/dd/))}/dl);//

注意上面的更正示例中第二个部分使用.../的其实是一个假设的情境//

实际上在map函数中你应该为每个生成的元素对dt和dd分别指定key//

而不是将key放在Fragment或上因为它们不接受key属性。

}//

key{${item.id}-term}{item.term}/dtdd

key{${item.id}-description}{item.description}/dd/))}/dl);

}注意在简写语法.../中Fragment本身不接受key属性。

如果需要为集合中的元素指定key则应该直接将这些key属性放在需要它们的元素上如上面的更正示例所示。

在表格中使用当需要在table中返回多个tr、td等元素时可以使用Fragment来避免额外的div或span节点。

在列表中使用当需要在ul或ol中返回多个li元素时同样可以使用Fragment。

在组件返回多个元素时使用当React组件需要返回多个元素但又不希望引入额外DOM结构时Fragment是一个很好的选择。

Fragment不能作为事件的直接目标因为Fragment不会渲染为真实的DOM节点所以它不能作为事件的直接目标。

如果需要为Fragment中的元素添加事件处理函数应该直接将这些函数添加到对应的元素上。

Fragment不支持ref属性同样地因为Fragment不是真实的DOM节点所以它不支持ref属性。

如果需要引用Fragment中的元素应该使用其他方法如回调refs或React.createRef()。

综上所述React中的Fragment是一个非常有用的工具它允许你在不引入额外DOM结构的情况下组合多个元素。

通过合理使用Fragment可以保持DOM结构的简洁和高效从而提高React应用的性能和可维护性。

渲染相关和性能相关API

作用将React组件渲染到HTML文档中。

用法ReactDOM.render(App

document.getElementById(root));这里的App

/是React组件document.getElementById(root)是HTML中的一个容器用于渲染React组件。

React.Component

作用React中最基本的组件类型用于构建用户界面。

特点可以接受props和state作为参数并返回一个虚拟DOM节点。

React.memo

作用用于函数式组件可以使其只在props发生变化时重新渲染。

用法const

MyComponent

作用用于分析React组件的渲染性能帮助识别应用程序中卡顿的原因。

用法通过onRender回调函数获取渲染时间和相关信息。

二、React渲染优化相关API

作用通过重写该函数实现组件的条件渲染即只有在组件的props或state发生变化时才重新渲染组件。

用法在class组件中重写shouldComponentUpdate(nextProps,

nextState)方法返回true或false以决定是否重新渲染。

PureComponent

作用React自带的一个纯组件其shouldComponentUpdate函数已经被自动实现只有在props或state发生变化时才会重新渲染组件。

特点仅会做浅层比较复杂的state、props需要自行对比。

useCallback和useMemo

useCallback返回一个记忆化的回调函数该函数在依赖项不变时保持不变。

useMemo返回一个记忆化的值该值在依赖项不变时保持不变。

React.Profiler用于性能分析

作用除了作为渲染相关API外还可以用于性能分析帮助开发者识别和优化性能瓶颈。

用法通过包裹需要分析的组件并在onRender回调中获取和分析渲染性能数据。

综上所述React提供了丰富的渲染和渲染优化API帮助开发者构建高效、可维护的用户界面。

在开发过程中根据具体需求和场景选择合适的API进行渲染和性能优化是至关重要的。

渲染相关和性能相关底层API

React渲染相关和渲染优化相关的底层API主要涉及React的虚拟DOMVDOM、调度系统、任务优先级以及React

一、React渲染相关底层API

作用将React组件渲染到DOM中。

这是React应用启动的入口点负责将React元素树挂载到指定的DOM节点上。

React

作用React使用虚拟DOM来提高渲染效率。

虚拟DOM是一个轻量级的JavaScript对象描述了真实DOM的结构。

React通过比较新旧虚拟DOM的差异然后只更新真实DOM中需要变化的部分从而避免不必要的DOM操作。

底层实现React

16引入的新的协调算法它允许将渲染工作拆分成更小的工作单元并可以中断和恢复这些工作单元从而提高了React应用的响应性和性能。

二、React渲染优化相关底层API

18引入了一个新的调度系统它负责管理任务的优先级和执行顺序。

调度系统使用优先级队列来安排任务确保高优先级的任务能够优先得到执行。

底层实现调度系统的核心是Scheduler模块它提供了一套API来安排、更新和取消任务。

React使用这套API来管理渲染任务的优先级和执行顺序。

并发模式Concurrent

18中的一个重要特性它允许React在不阻塞主线程的情况下执行渲染和更新。

这意味着React可以在用户进行交互时继续处理后台任务如数据获取和状态更新。

底层实现并发模式依赖于React的调度系统和虚拟DOM算法。

通过调度系统React可以管理任务的优先级和执行顺序通过虚拟DOM算法React可以比较新旧虚拟DOM的差异并只更新需要变化的部分。

startTransition

作用startTransition是一个新的渲染API它允许开发者将某些更新标记为“过渡性”的这些更新可以被中断和延迟执行。

这对于处理复杂的动画或过渡效果非常有用。

用法使用startTransition包裹更新逻辑告诉React接下来的更新不应该立即执行而是等待过渡完成。

useDeferredValue

作用useDeferredValue允许开发者创建一个延迟的值它不会立即阻塞组件的渲染但会在适当的时候更新。

这对于优化需要等待某些数据加载完成的组件非常有用。

用法使用useDeferredValue创建一个延迟的值并将其传递给需要优化的组件。

shouldYieldToHigherPriorityWork

作用这是一个内部函数用于检查是否有更高优先级的工作需要执行。

在并发模式中React可以根据任务的类型和重要性分配不同的优先级并允许低优先级的任务在执行过程中被中断以便处理更高优先级的更新。

综上所述React的渲染和渲染优化相关的底层API涉及虚拟DOM、调度系统、并发模式以及新的渲染API如startTransition和useDeferredValue等。

这些API共同作用于React的渲染流程提高了React应用的性能和响应性。