React入门第二天（函数式组件实现数据响应式，生命周期的监听）

Posted 2022-03-10 岁月可贵

数据响应式

由于函数式组件没有 this 指向，导致无法获取到 setState，无法实现数据动态化

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）

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('销毁阶段');
      
  )