React函数组件详解

学习内容：

1. 函数组件创建方式
2. 没有state怎么办
3. 没有生命周期怎么办
4. useState的原理

一、函数组件创建方式

1. 箭头函数创建

const App = (props)=>{
    return (
        <div>halo-{props.message}</div>
    )
}

简写形式

const App = props => (<div>halo-{props.message}</div>)

写一个箭头函数，箭头函数return div，简写形式，没有{}，就不要写return了

2. 普通函数创建

function App(props){
    return (<div>halo-{props.message}</div>)
}

3. 函数组件与class组件

函数组件可以代替class组件吗？ 写同一个+1功能，比较两者的代码

• 可以，函数组件代码量少了很多，而且不用使用this
• 但是，代替面临两个问题：
  • 函数组件没有state Hooks API ----> useState
  • 函数组件没有生命周期 Hooks API ----> useEffect

二、useEffect的使用

1.useEffect模拟componentDidMount

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

2.useEffect模拟componentDidUpdate

useEffect(
    ()=>{console.log('n或m刷新了')},[n,m]
)

3.useEffect模拟componentWillUnmount

useEffect(()=>{
    console.log('第一次渲染')
    return ()=>{
        console.log('组件要死了')
    }
})

4.其他生命周期的模拟

• constructor
  • 函数执行的时候就相当于constructor
• render
  • 函数组件的返回值就是render的返回值
• shouldComponentUpdate
  • 后面的React.memo和useMemo可以解决

三、自定义Hook之useUpdate

useEffect模拟componentDidUpdate在第一次渲染的时候也会触发，因此我们写一个函数useUpdate使得只有页面组件更新的时候才会触发

useUpdate

// App.js文件中
import React from 'react'

const useUpdate = (fn,dep)=>{
    const [count,setCount] = React.useState(0)
    useEffect(()=>{setCount((x)=>x+1)},[dep]) //dep变化触发计数函数
    useEffect(()=>{if(count>1){fn()}},[count,fn]) //计数函数条件满足，触发原本应该执行的fn函数
}

export default useReact    

//index.js中
import React from 'react'
import ReactDOM from 'react-dom'
const App = ()=>{
    const [n,setN] = React.useState(0)
    const onClick = ()=>{
        setN(n+1)
    }
    useUpdate(()=>{console.log('n变了')},n)
    return (
        <div>n:{n}<button onClick={onClick}>+1</button></div>
    )
}