React函数组件的写法

const App = () => {
  return (
    <>
    </>
  )
}

React函数模拟生命周期

constructor 在函数组件中声明变量/函数即为初始化
render 在函数组件中renturn 即为render
compomentDidMount 使用 useEffect

 React.useEffect(()=>{},[])

componentDidUpdate 使用useEffect

 React.useEffect(()=>{},[n])
 //表示n更新时 执行fn
 
 React.useEffect(()=>{})
 //表示任何数据变化，都要执行fn

componentWillUnmount 使用 useEffect

 React.useEffect(()=>{
     return () => {...}
 })

useEffect 的 bug

使用useEffect模拟componentDidUpdate时有一个问题，那就是数据首次从undefined变成数据时，也会触发useEffect中的代码。

解决方法：

使用一个变量存储更新次数，当变量 > 1 时，在执行fn

const App = () => {
const [n, setN] = React.useState(0)
const addN = () => {
  setN(n + 1)
}

const [count, setCount] = React.useState(0)
React.useEffect(() => {
  if (count > 1) {
    console.log('变化了')
  }
}, [count])
React.useEffect(() => {
  setCount(count => count + 1)
}, [n])

return (
  <>
    {n}
    <button onClick={addN}> +1</button>
  </>
)
}

我们对其进行一下封装

const useUpdate = (fn, n) => {
const [count, setCount] = React.useState(0)
React.useEffect(() => {
  if (count > 1) {
    fn()
  }
}, [count, fn])
React.useEffect(() => {
  setCount(count => count + 1)
}, [n])
}

const App = () => {
const [n, setN] = React.useState(0)
const addN = () => {setN(n + 1)}

useUpdate(() => {console.log('变化了')}, n)

return (
  <>
    {n}
    <button onClick={addN}> +1</button>
  </>
)
}

浅析React函数组件

React函数组件的写法

React函数模拟生命周期

useEffect 的 bug