使用Hooks模拟React函数组件的生命周期-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44801506/article/details/113768867

本文介绍了如何使用React Hooks API来模拟函数组件的生命周期。通过useState进行状态读写，useEffect处理副作用，分别模拟componentDidMount、componentDidUpdate和componentWillUnmount。此外，还提到了组件创建时的constructor模拟和返回内容作为render过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数组件模拟生命周期

Hooks API

一. useState 就是读写

第一个参数读第二个参数写，useState后跟初始值

const App =(props)=>{
const [n,setN] =useState(0);
const onClick =()=>{
	setN(n+1); //写n 就用 setN()
}
//函数组件return 要写在定义的APP内
	return(
	<div>
	{n} //读n就用第一个参数
	<button onClick={onClick}}>+1</button>
	</div>
 )
}

export default App;

二. useEffect 解决生命周期

{解决副作用}

1. 第一次执行时渲染模拟 componentDidMount

useEffect(()=>{
	console.log('use Effect') 
}，[])

//[]第二个参数表示在什么时候执行
//[]表示在第一次渲染的时候执行

在这里插入图片描述

- 2. 更新模拟componentDidUpdate
在某个数据被更新的时候去改变它

useEffect(() => { 
    console.log('n变了')
  }, [n])
  
   //想在n 更新的时候去更新
  //[]里面写了什么，那就是那个东西变了就去执行
  //注意：还没有点+1 ，控制台显示n变了是因为n从undefined 变成0了，

在这里插入图片描述

- 3. 销毁时执行模拟 componentWillUnMount

 //销毁时
  useEffect(() => { 
    return () => { 
      console.log('Child 销毁了')
    }

  })

在这里插入图片描述

三，创建一个组件的时候执行的模拟constructor

  Constructor 是在创建一个组件的时候执行的
  return之前的就是构造的，函数组件执行的时候，就相当于constructor

const App = (props) => {
//cont是constructor 创建组件时执行
        const [childVisible, setChildVisible] = useState(true); /
        const hide = () => { 
          setChildVisible(false)  //点击隐藏的时候给false 不可见
        }

        const show = () => { 
          setChildVisible(true)
        }
        }

四，模拟 render return 就是render

 return就是render
            可以return多个函数
            const X = () => { 
              const n = 1 + 1;
              return <div>xDemo</div>
            }
            const Y = () => { 
              const n = 1 + 1
              return <div>yDemo</div>
            }

            const App = (props) => {

              const [childVisible, setChildVisible] = useState(true); 
              const hide = () => { 
                setChildVisible(false)  
              }

              const show = () => { 
                setChildVisible(true)
              }
              return <>  
                <X></X>
                <Y></Y>
              </>
              函数当标签用
              多个函数用<></>包起来。