react 渲染抽离

最新推荐文章于 2024-11-01 13:37:40 发布

昌周

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量77

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45623378/article/details/130465479

版权

文章讨论了在React应用中，当多个渲染表达式混合在一起时导致的维护难题。通过将表达式抽取到单独的方法中，如`sentValue`和`forEachValue`，可以提高代码可读性和可维护性。此外，文章还展示了如何使用`useState`管理状态，并提供了销毁方法以释放资源。

摘要由CSDN通过智能技术生成

问题，多个渲染表达式全部写在一个渲染里面，维护造成维护困难

解决通过方法来进行解析 { 方法名称() }

解析：这样方法在执行的时候被理解加载解析

代码

import { memo,useState} from "react"
const Head = function() {
    let sentvalue =  () => {
    let sebtvalue =  document.dispatchEvent(new CustomEvent('value',{detail:{messge:'ccdc'},bubbles:true,cancelable:true}))
    }
   const  clearbution = () => {
      console.log("执行销毁")
           sentvalue = null
   }
   let  [array,setarray] = useState([1,3,4])
   // 抽离代码
   const foreachvalue = ()=> {
       return (<div>
                  { array.filter(  (value)=> {
                    console.log(value)
                    return  value 
                  })}
             </div>)
   }
   const setarrayvalue =  function () {
    setarray([123])
   }
   const name = <div>测试表达式</div>
      return (
   
         < div className="dispath"> 组件头部区域 
         <button  onClick={sentvalue}>
啦啦啦啦啦啦
         </button>
         <button onClick={setarrayvalue}>
                改变数据的值
         </button>
         <button onClick={clearbution}> 销毁 </button>
          {name}
          {foreachvalue()}
         </div>
         
      )
}


export default   Head