0
点赞
收藏
分享

微信扫一扫

React入门第二天(函数式组件实现数据响应式,生命周期的监听)

十里一走马 2022-03-12 阅读 165

数据响应式

import React from 'react'
import { useState } from 'react'
export default function App4() {
    // Hook 只能用在组件函数中的最顶层
    const [num1, setNum1] = useState(1);
    const [num2, setNum2] = useState(1);
    return (
       <>
          <h2>{num1}</h2>
          <button onClick={() => setNum1(num1 + 1)}>修改值</button>
          <hr />
          <h2>{num2}</h2>
          <button onClick={() => setNum2(num2 + 1)}>修改值</button>
      </>
    )
}

模拟 挂载完成mounted数据更新update销毁前 beforeDestroy(利用 hooks)

  • 挂载完成mounted
import React from 'react'
import { useEffect } from 'react'
export default function App() {
   // Hook 只能用在组件函数中的最顶层 
   useEffect(() => {
    // 这里主要用于发送 axios 请求
    console.log("挂载完成")
  })
}
  • 数据更新update
// 数据更新update
import React from 'react'
import { useState, useEffect } from 'react'
export default function App() {
  const [num1, setNum1] = useState(1);
  const [num2, setNum2] = useState(1); 
   // 监听一个数据
   useEffect(() => {
       console.log('num1更新')
   }, [num1])
    
   // 监听多个数据
   useEffect(() => {
    console.log('更新')
  }, [num1, num2])
    
  // 监听所有
  useEffect(() => {
    console.log('更新')
  })
   
  // 不监听
  useEffect(() => {
    console.log('更新')
  }, [])
}
  • 销毁前 beforeDestroy
import React from 'react'
import { useEffect } from 'react'
export default function App() {
  useEffect(()=>{
      return () => {
        console.log('销毁阶段');
      }
  })
}
举报

相关推荐

0 条评论