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

数据响应式

由于函数式组件没有 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('销毁阶段');
      }
  })
}