本篇博客用来记录我的学习成果
防止遗忘

创建方式

实现 +1 功能

import React, { useState } from 'react'

const App = props => {
  const [n, setN] = useState(0)
  const onClick = () => setN(n + 1)
  return (
    <div>
      {n}
      <button onClick={onClick}>+1</button>
    </div>
  )
}

export default App

比 class 组件 简约得多

没有 state 怎么办

React v16.8.0 推出 Hooks API，其中 useState 可以解决问题

没有生命周期钩子怎么办

React v16.8.0 推出 Hooks API，其中 useEffect 可以解决问题

模拟 `c...DidMount`

useEffect(() => { console.log('第一次渲染') }, []) 返回的第二个参数为空数组

import React, { useState, useEffect } from 'react'

const App = props => {
  const [n, setN] = useState(0)
  const onClick = () => setN(n + 1)
  useEffect(() => {
    console.log('第一次渲染')
  }, [])
  return (
    <div>
      {n}
      <button onClick={onClick}>+1</button>
    </div>
  )
}

export default App

模拟 c...Didupdate

useEffect(() => { console.log('n 更新了') }, [n]) 返回的第二个参数里面写：什么东西更新的时候执行

useEffect(() => { console.log('任意属性更新') }) 如果想要任何一个 state 变化都要执行的话，就去掉中括号 []

import React, { useState, useEffect } from 'react'

const App = props => {
  const [n, setN] = useState(0)
  const [m, setM] = useState(0)
  const onClickN = () => setN(n + 1)
  const onClickM = () => setM(m + 1)
  useEffect(() => {
    console.log('n 更新了')
  }, [n])
  return (
    <div>
      {n} <button onClick={onClickN}>n+1</button>
      <hr />
      {m} <button onClick={onClickM}>m+1</button>
    </div>
  )
}

export default App

模拟 c...WillUnmount

useEffect(() => { return () => {console.log('Child 销毁了') } }) 在 useEffect 里 return 另外一个函数

import React, { useState, useEffect } from 'react'

const App = props => {
  const [childVisible, setChildVisible] = useState(true)
  const hide = () => setChildVisible(false)
  const show = () => setChildVisible(true)

  return (
    <div>
      {childVisible ? <button onClick={hide}>hide</button> : <button onClick={show}>show</button>}
      {childVisible ? <Child /> : null}
    </div>
  )
}

const Child = props => {
  useEffect(() => {
    return () => {
      console.log('Child 销毁了')
    }
  })
  return (
    <div>Child</div>
  )
}

export default App

其他生命周期钩子什么模拟

constructor
函数组件执行的时候，就相当于 constructor
shouldComponentUpdate
后面的 React.memo 和 useMemo 可以解决
render
函数组件 return 的东西就是 render 的东西

总结：
能用函数组件就用函数组件吧，因为它更简单

完。

「React」函数组件真香！