数据响应式
import React from 'react'
import { useState } from 'react'
export default function App4() {
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)
import React from 'react'
import { useEffect } from 'react'
export default function App() {
useEffect(() => {
console.log("挂载完成")
})
}
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('更新')
}, [])
}
import React from 'react'
import { useEffect } from 'react'
export default function App() {
useEffect(()=>{
return () => {
console.log('销毁阶段');
}
})
}