React：函数组件

创建方式

const Hello = (props) => {
    return <div>{props.message}</div>
}
​
const Hello = props => <div>{props.message}</div>
​
function Hello(props){
    return <div>{props.message}</div>
}

没有 state 怎么办

React v16.8.0 推出 Hooks API

其中的一个API叫做useState可以解决问题

示例

没有生命周期怎么办

React v16.8.0 推出 Hook API

其中的一个API叫做useEffect可以解决问题——

模拟 componentDidMount

示例

useEffect(()=>{console.log('第一次渲染')},[])

模拟componentDidUpdate

示例

useEffect(()=>{console.log('任意属性变更')})
useEffect(()=>{console.log('n变了')},[n])

但是componentDidUpdate在第一次由undefined变成0时不执行函数，后续变化时才会执行，怎么在函数组件里模仿这一功能呢？

自定义Hook，写一个useUpdate

模拟componentWillUnmount

示例

useEffect(()=>{
  console.log('渲染或变化') // 函数本身渲染时执行
  return ()=>{
    console.loe('组件要死了')
  } // 函数返回的函数 销毁时执行
})

模拟constructor

函数组件执行时，就相当于constructor

模拟shouldComponentUpdate

后面的 React.memo 和 useMemo 可以解决

模拟render

函数组件的返回值就是render的返回值