react生命周期

最新推荐文章于 2025-12-16 16:19:46 发布

原创最新推荐文章于 2025-12-16 16:19:46 发布 · 738 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在React应用中使用AHooks库，如useReactive、useState和useEffect等，以及useUpdateEffect来实现高效的状态管理和DOM更新。模型(Model2)展示了如何结合styled-components进行组件样式管理。

import { useMount,useUnmount,useReactive ,useUpdateEffect} from "ahooks";
import styled from "styled-components";
import {useEffect, useState} from 'react'
export default  Model2 = ({attr,getData}) => {//父级属性，方法
  
  const state = useReactive({ //直接更改
    name:null
  })
  const [pages, setPages] = useState({ //set方法修改
    current: 1,
    limit: 10
  })
  useEffect(() => {
   
  }, [pages.current, pages.limit])
  useUpdateEffect(() => {
   
  }, [pages.current, pages.limit])//会忽略首次执行，只在依赖更新时执行
  useMount(() => {
    
  })
  useUnmount(() => {
   
  })
  
  
  return (
    <Style>
 

    </Style>
  )
}
const Style = styled.div`
  width: 80%;
 
`;