原创投稿
广告
广告
广告 广告 广告 广告
广告
广告 国内BGP机房32G内存299元 网站收录排名问题解决 【超牛】搜外友链平台 站长在线扒站工具【免费】 【免费】站长开发工具箱 【推荐】站长自动外链工具 广告位联系QQ：253000106 独立服务器100M/不限/免备 2核2G服务器新用户低至68元/年 虚拟资源平台,轻松变现 10000来路IP只需8元 站群系统程序-专注SEO站群 黑帽SEO论坛_黑帽聚集地 企业HTTP代理IP服务提供商 软文推广，在线获客【定制】 站群服务器99元起 SEO免费工具分享 外推代发包收录 【国内国际】短信推广，免费测试 实力产品收量 外链代发 5分一条 快速排名 █一解决“收录、排名”问题一█ ●●●优质搜狗泛收录域名●●● AI数字人直播系统源码 百度SEO排名7-15天上首页
  1. 创想鸟首页
  2. 站长之家
  3. 编程技术

中级：React 中的生命周期方法和 Hook

PHP中文网 • • 编程技术 • 阅读 2

中级：react 中的生命周期方法和 hook

作为中级开发人员，理解并有效使用 react hooks 和生命周期方法对于构建健壮、可维护和可扩展的应用程序至关重要。本文将深入探讨基本钩子、自定义钩子和高级钩子模式，例如使用 usereducer 管理复杂状态以及使用 usememo 和 usecallback 优化性能。

react hook 简介

react hooks 允许您在不编写类的情况下使用状态和其他 react 功能。 react 16.8 中引入的钩子为状态管理和生命周期方法提供了一种更简单、更实用的方法。

hooks 的主要优点

更简单的代码： hooks 使您能够直接在功能组件中使用状态和生命周期方法，从而使代码更具可读性和可维护性。重用逻辑：自定义挂钩允许您跨多个组件提取和重用有状态逻辑。增强的功能组件： hooks 提供了类组件的所有功能，例如管理状态和副作用，而无需使用类。

必备挂钩

使用状态

usestate 是一个钩子，可让您向功能组件添加状态。

示例：

import react, { usestate } from 'react';const counter = () => {  const [count, setcount] = usestate(0);  return (    
      
you clicked {count} times
          
  );};export default counter;

登录后复制

在此示例中，usestate 将 count 状态变量初始化为 0。setcount 函数在单击按钮时更新状态。

使用效果

useeffect 是一个钩子，可让您在功能组件中执行副作用，例如获取数据、直接与 dom 交互以及设置订阅。它结合了类组件中多个生命周期方法的功能（componentdidmount、componentdidupdate 和 componentwillunmount）。

示例：

import react, { usestate, useeffect } from 'react';const datafetcher = () => {  const [data, setdata] = usestate(null);  useeffect(() => {    fetch('https://api.example.com/data')      .then(response => response.json())      .then(data => setdata(data));  }, []);  return (    
      {data ? 
{json.stringify(data, null, 2)}


登录后复制 : 'loading...'}      );};export default datafetcher;


在此示例中，useeffect 在组件挂载时从 api 获取数据。


      使用上下文


usecontext 是一个钩子，可让您访问给定上下文的上下文值。


示例：


import react, { usecontext } from 'react';const themecontext = react.createcontext('light');const themedcomponent = () => {  const theme = usecontext(themecontext);  return 
the current theme is {theme}
;};export default themedcomponent;


登录后复制


在此示例中，usecontext 访问 themecontext 的当前值。


      使用reducer


usereducer 是一个钩子，可让您管理功能组件中的复杂状态逻辑。它是 usestate 的替代品。


示例：


import react, { usereducer } from 'react';const initialstate = { count: 0 };const reducer = (state, action) => {  switch (action.type) {    case 'increment':      return { count: state.count + 1 };    case 'decrement':      return { count: state.count - 1 };    default:      return state;  }};const counter = () => {  const [state, dispatch] = usereducer(reducer, initialstate);  return (    
      
count: {state.count}
                
  );};export default counter;


登录后复制登录后复制


在这个例子中，usereducer通过reducer函数来管理计数状态。


      定制挂钩


自定义挂钩让您可以跨多个组件重用有状态逻辑。自定义钩子是使用内置钩子的函数。


示例：


import { usestate, useeffect } from 'react';const usefetch = (url) => {  const [data, setdata] = usestate(null);  useeffect(() => {    fetch(url)      .then(response => response.json())      .then(data => setdata(data));  }, [url]);  return data;};const datafetcher = ({ url }) => {  const data = usefetch(url);  return (    
      {data ? 
{json.stringify(data, null, 2)}


登录后复制 : 'loading...'}      );};export default datafetcher;


在此示例中，usefetch 是一个自定义钩子，用于从给定 url 获取数据。


      高级钩子模式


      使用 usereducer 管理复杂状态


当处理涉及多个子值的复杂状态逻辑或当下一个状态依赖于前一个状态时，usereducer 可能比 usestate 更合适。


示例：


import react, { usereducer } from 'react';const initialstate = { count: 0 };const reducer = (state, action) => {  switch (action.type) {    case 'increment':      return { count: state.count + 1 };    case 'decrement':      return { count: state.count - 1 };    default:      return state;  }};const counter = () => {  const [state, dispatch] = usereducer(reducer, initialstate);  return (    
      
count: {state.count}
                
  );};export default counter;


登录后复制登录后复制


在这个例子中，usereducer通过reducer函数来管理计数状态。


      使用 usememo 和 usecallback 优化性能


      使用备忘录


usememo 是一个钩子，它可以记忆计算值，仅当依赖项之一发生变化时才重新计算它。它通过防止每次渲染时进行昂贵的计算来帮助优化性能。


示例：


import react, { usestate, usememo } from 'react';const expensivecalculation = ({ number }) => {  const computefactorial = (n) => {    console.log('computing factorial...');    return n  computefactorial(number), [number]);  return 
factorial of {number} is {factorial}
;};const app = () => {  const [number, setnumber] = usestate(5);  return (    
       setnumber(parseint(e.target.value, 10))}      />          
  );};export default app;


登录后复制


在此示例中，usememo 确保仅当数字发生变化时才重新计算阶乘计算。


      使用回调


usecallback 是一个用于记忆函数的钩子，防止在每次渲染时重新创建该函数，除非其依赖项之一发生更改。它对于将稳定的函数传递给依赖引用相等的子组件很有用。


示例：


import React, { useState, useCallback } from 'react';const Button = React.memo(({ onClick, children }) => {  console.log(`Rendering button - ${children}`);  return ;});const App = () => {  const [count, setCount] = useState(0);  const increment = useCallback(() => setCount((c) => c + 1), []);  return (    
            
Count: {count}
    
  );};export default App;


登录后复制


在此示例中，usecallback 确保仅在其依赖项发生变化时才重新创建增量函数，从而防止 button 组件不必要的重新渲染。


      结论


掌握 react hooks 和生命周期方法对于构建健壮且可维护的应用程序至关重要。通过理解和利用 usestate、useeffect、usecontext 和 usereducer 等钩子，以及自定义钩子等高级模式以及 usememo 和 usecallback 的性能优化，您可以创建高效且可扩展的 react 应用程序。作为中级开发人员，这些技能将显着增强您开发和维护高质量 react 应用程序的能力，使您成为团队的宝贵资产。


以上就是中级：React 中的生命周期方法和 Hook的详细内容，更多请关注【创想鸟】其它相关文章！





 
 



                                                        
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。


发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2673189.html
                        


                        

                        

                            
 赞 (0)

                                                    


                        

                            

                                                                

                                    

                                                                                     0                                         0                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                    

    
关于作者
    

        

            PHP中文网的头像
        

        

            

                

                    PHP中文网签约作者
                

                

                                    

            

                            
            

                412.1K
                文章
            

                    

                0
                评论
            

                    

                1
                粉丝
            

        

                        
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
        

    


                        

                    

                
                

                     上一篇
                    2025年3月7日 13:37:37
                

            

                            

                
                

                    下一篇 
                    2025年3月7日 13:37:44
                

            

            

                    




AD推荐 黄金广告位招租... 更多推荐









                                            

                            
相关推荐
                        

                    


    	

		
发表回复 
登录后才能评论

请登录

您还未登录，请登录后再进行相关操作！

登录 注册