玉溪网站建设现状零基础网页设计培训机构

玉溪网站建设现状,零基础网页设计培训机构,公司做的网站怎么维护,广东企业网站建设策划使用Hook进行记忆化处理 在React中#xff0c;每次渲染时函数组件都会被调用#xff0c;这意味着频繁的计算和函数创建可能会对性能产生负面影响。为了优化性能并防止不必要的重新计算#xff0c;React提供了3种钩子: useMemo()、useCallback()和useRef()。这些钩子分别允许…使用Hook进行记忆化处理在React中每次渲染时函数组件都会被调用这意味着频繁的计算和函数创建可能会对性能产生负面影响。为了优化性能并防止不必要的重新计算React提供了3种钩子:useMemo()、useCallback()和useRef()。这些钩子分别允许记忆化值、函数和引用。在项目中使用这三种记忆化处理优化可以提高代码效率。useMemo() 钩子useMemo()钩子用于记忆化计算结果确保只有在依赖项发生变化时才重新计算用于优化函数组件的性能。它接收一个函数和一个依赖项数组并返回记忆化值。以下是使用useMemo()钩子的示例:import{useMemo}fromreact;// 计算第 index 项的斐波那契值functioncomputeExpensiveValue(index){leta1;letb1;for(leti0;iindex-1;i){bba;ab-a;}returna;}functionComponent(){constdependency10;constexpensiveResultuseMemo((){// Expensive computationreturncomputeExpensiveValue(dependency);},[dependency]);return(div{expensiveResult}/div);}在这个例子中我们使用useMemo记忆化了expensiveResult值。当依赖值发生变化时函数内的计算才会执行。如果依赖保持不变将返回之前记忆化的值而不是重新计算结果。React.memo 组件除了优化组件中的涉及昂贵计算的函数React也提供了React.memo组件用于优化函数组件的性能。它通过记忆化组件的渲染输出在组件的props没有变化时跳过重新渲染从而提高性能。React.memo的基本使用方法是将一个函数组件作为参数传递给React.memo并返回一个记忆化组件。importReactfromreact;import{useState}fromreact;// 计算第 index 项的斐波那契值constExpensiveComponentReact.memo(({index}){leta1;letb1;for(leti0;iindex-1;i){bba;ab-a;}console.log(ExpensiveComponent);returndiv{a}/div;});functionMyComponent({index}){console.log(MyContent);returndiv{index}/div}functionComponent(){const[count,setCount]useState(0);const[index,setIndex]useState(10);return(divspan{count}/spanbutton onClick{function(){setCount(count1);}}/buttonMyComponent index{index}/ExpensiveComponent index{index}//div);}在上面这个例子中用户通过按钮操作改变了count时Component组件会因为状态改变重新渲染但是Component的子组件ExpensiveComponent却因为是memo组件且它的props没有发生变化所以不会被重新渲染。同样作为子组件MyComponent却会被重新渲染。确保你的组件实在React.StrictMode模式下渲染的然后打开命令行点击“”按钮就可以观察到只会打印MyComponent而不会打印ExpensiveComponent。也许你会看到一次点击打印了两次那是因为在React.StrictMode模式下为了确保不出错组件会被调用两次。默认情况下React.memo只会对比前后的props如果没有变化则不会重新渲染。当然咱们也可以通过传递一个自定义比较函数来更精确地控制重新渲染的逻辑。// 计算第 index 项的斐波那契值constExpensiveComponentReact.memo(({index}){leta1;letb1;for(leti0;iindex-1;i){bba;ab-a;}console.log(ExpensiveComponent);returndiv{a}/div;},function(prevProps,currentProps){// 当前 props 中的 index 如果为 偶数则不重新渲染returncurrentProps.index%2;});这个比较函数接收两个props对象第一个表示上一次的props参数第二个表示当前的props参数返回一个布尔值。加上这个自定义比较函数之后是否重新渲染会依赖这个函数的返回值是否为true为true怎返回上一次的渲染结果否则重新渲染并返回新的渲染结果。React.memo适用于以下场景:静态数据展示: 组件接收的props很少变化但是组件本身比较复杂重新渲染的成本较高。性能优化: 在大列表或表格中每个项目都是独立的组件使用React.memo可以避免不必要的重新渲染。避免深度相等检查: 在正式运行模式下组件其实也是根据其props参数是否变化而选择渲染的但是有些参数可能比较复杂自定义函数可以避免深度相等检查特别是在props包含大量数据时。需要注意的是在默认情况下也就是没有自定义比较函数传入的情况下React.memo只进行浅比较(只比较props的一级内容)所以对于嵌套对象咱们需要传入对应的自定义比较函数。同时React.memo只根据props的变化进行重新渲染如果这个组件内部定义了状态(state)或者上下文(context)这二者在变化的时候也不会触发组件的重新渲染。React.memo是React中一个很强大的高阶组件在合适的使用场景下正确它能够避免不必要的重复渲染有效的提高整个项目的运行效率。useCallback() 钩子当函数组件渲染时它的所有函数都会被重新创建包括在组件内部定义的任何内联回调。这可能导致接收这些回调作为props的子组件进行不必要的重新渲染因此它们将回调视为新的引用并触发重新渲染。要想在项目中避免这种函数重新创建咱们就应该学会使用useCallback钩子。useCallback()钩子用于记忆化函数。意味着它只会被创建一次并且在依赖项没有变化的情况下在随后的渲染中不会被重新创建。useCallback()接收两个参数第一个是想要记忆化的函数第二个是依赖项列表这些依赖项用来确定React何时应该重新创建这个函数而不是使用记忆化版本。functionMyComponent(){returnMyButton onClick{()console.log(click)}/};这个例子中我们为onClick属性提供的内联函数将在MyComponent每次渲染时被创建。这意味着MyButton组件每次都将接收一个新的函数引用这将导致MyButton组件进行新的渲染。以下是一个演示使用useCallback钩子的例子:importReactfromreact;constMyComponent(){constclickHandlerReact.useCallback((){console.log(click);},[]);returnMyButton onClick{clickHandler}/};在这个例子中clickHandler函数使用useCallback进行了记忆化空的依赖项数组[]表明该函数没有依赖项并应在组件的生命周期内保持不变。添加了useCallback的结果是在MyComponent的每次渲染中都向MyButton提供了相同的函数实例防止了子组件不必要的重新渲染。useRef() 钩子当咱们希望咱们的组件“记住”某些信息但又不想让这些信息触发新的渲染时咱们就需要使用ref。当然这个好像是有点鸡肋咱们是否能够通过局部变量完成这个功能呢好像在组件状态中有这么一段代码。functionMyContent(){letindex0;return(divspan{index}/spanbutton onClick{function(){index1;console.log(index);}}/button/div);}在咱们点击“”按钮时在命令行中打印的值是一直变化的。但是当涉及到组件嵌套当咱们的这个组件作为子组件被重新渲染时这个局部变量就会被重新赋值为0。有兴趣的小伙伴可以尝试一下。Ref是reference的缩写字面意思就是引用从事过Java后端开发或者C开发的小伙伴应该理解这个和变量的区别。引用就相当于独立于函数存在的变量在函数销毁和重建之后这个值依然是可以保持不变的。当然如果咱们用一个组件外的全局变量也是可以实现这个功能的但是全局变量过多不容易管理随着项目的一步步开发过多的全局变量会让咱们很难读懂和维护代码。所以在遇到需要组件“记住”某些信息的时候还是推荐使用官方给咱们提供的这个useRef钩子函数。useRef的使用方式如下:import{useRef}fromreact;functionMyContent(){constindexuseRef(0);return(divspan{index.current}/spanbutton onClick{function(){index.current1;console.log(index.current);}}/button/div);}使用useRef会返回一个这样的对象:{current:0// 你向 useRef 传入的值}咱们可以用ref.current属性访问该ref的当前值。不同于state的是这个值是有意被设置为可变的意味着你既可以读取它也可以写入它。这里的ref指向一个数字但是像state一样咱们可以让它指向任何东西字符串、对象甚至是函数。请注意组件不会在每次递增时重新渲染。 与state一样React会在每次重新渲染之间保留ref。但是设置state会重新渲染组件更改ref不会相比于state咱们使用ref的时候应该清楚它的改变并不会触发组件的重新渲染所以在上述代码中虽然ref改变了但是span{index.current}/span中的显示的内容却不会改变也就是说对于使用页面的普通人是看不到改变的这就需要我们知道尽量不要去在渲染期间读取ref.current(在JSX显示部分)这会导致代码不可靠。一般Ref的应用场景就是去替代一些咱们需要使用不需要展示的“全局变量”的地方。比如在组件设置了一个timeout那么就需要这样一个ref去记录它的ID以便在使用完成之后清理它。此外useRef还可以用来访问DOM节点或React组件实例。ref和DOM可以将ref指向任何值。但是ref最常见的用法是访问DOM元素。例如如果你想以编程方式聚焦一个输入框这种用法就会派上用场。当咱们将ref传递给JSX中的ref属性时比如div ref{myRef}React会将相应的DOM元素放入myRef.current中。当元素从DOM中删除时React会将myRef.current更新为null。由于React会自动处理更新DOM以匹配你的渲染输出因此你在组件中通常不需要操作DOM。但是有时你可能需要访问由React管理的DOM元素 —— 例如让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在React中没有内置的方法来做这些事情所以你需要一个指向DOM节点的ref来实现。import{useRef}fromreact;functionComponent(){constinputRefuseRef(null);consthandleButtonClick(){inputRef.current.focus();};return(divinput typetextref{inputRef}/button onClick{handleButtonClick}Focus Input/button/div);};在这个例子中我们使用useRef创建了inputRef并将其分配给输入元素的ref属性这允许使用inputRef.current属性访问DOM节点。在handleButtonClick函数中需要调用inputRef.current上的focus方法在单击按钮时聚焦输入元素。代码层面上这个过程是这样的:useRef Hook返回一个对象该对象有一个名为current的属性。最初inputRef.current是null。当React为这个input创建一个DOM节点时React会把对该节点的引用放入inputRef.current。然后咱们可以从事件处理器(handleButtonClick)访问此DOM节点并使用在其上调用定义的内置浏览器API。通过使用useRef访问DOM节点用户可以在不触发组件重新渲染的情况下直接与底层DOM元素交互。访问另一个组件的DOM节点:ref也是可以像其他props属性参数一个从父组件传递给子组件的。import{useRef}fromreact;functionMyInput({ref}){returninput ref{ref}/;}functionMyForm(){constinputRefuseRef(null);returnMyInput ref{inputRef}/}在上面的代码中父组件MyForm创建了一个名为inputRef的ref并且将它传递给了MyInput子组件。MyInput将这个ref传递给input。因为input是一个内置组件在渲染时React会将ref的.current属性设置为这个input DOM元素。在MyForm中创建的inputRef现在指向MyInput返回的input DOM元素。在MyForm中创建的点击处理程序可以访问inputRef并且调用focus()来将焦点设置在input上。React 与 Ref的DOM操作在React中每次页面更新都分为两个阶段在渲染阶段React调用你的组件来确定屏幕上应该显示什么。在提交阶段React把变更应用于DOM。通常在渲染期间访问refs是没必要的。这也适用于保存DOM节点的refs。在第一次渲染期间DOM节点尚未创建因此ref.current将为null。在渲染更新的过程中DOM节点还没有更新。所以读取它们还为时过早。React在提交阶段设置ref.current。在更新DOM之前React将受影响的ref.current值设置为null。更新DOM后React立即将它们设置到相应的DOM节点。通常咱们都是从事件处理器访问ref的。官方手册上说Ref是一种给咱们的一种脱围机制也就是咱们在需要“跳出React”时使用它。什么时候咱们需要“跳出React”呢比如上文中获取input框的焦点滚动位置或者调用其他某些React没有暴漏的浏览器DOM操作API。需要注意的是如果咱们使用浏览器的某些修改DOM的API则所做出的修改可能会给React所做出的更改发生冲突。比如咱们使用remove()将这个节点给删除了而React通过状态修改需要重新渲染页面时却发现这个DOM节点不存在了那么就会造成React的崩溃因为React不知道怎么去处理一个已经删除了的DOM节点。所以在使用Ref操作DOM时咱们应该尽量避免对React管理的元素进行修改、添加子元素、从中删除子元素会导致不一致的视觉结果否则就会造成React的崩溃。当然如果你清楚你那么做并不会影响React后续更新的部分DOM还是可以进行这样的操作的。例如如果某些div在JSX中始终为空React将没有理由去变动其子列表。 因此在那里手动增删元素是安全的。通过useMemo、useCallback和useRef钩子的记忆化功能咱们可以避免很多不必要的计算、防止不必要的重新渲染并在渲染之间保留值和引用以此优化React应用程序的性能。这可以带来更流畅的用户体验和更高效的资源使用。