函数组件详解

创建方式

函数组件

//第一种
const Hello = (props) =>{
    return (
        <div>{props.message}</div>
    )
}

//第二种
const Hello = props => return <div>props.message</div>

//第三种
function Hello (props){
    return (
        <div>props.message</div>
    )
}

根据上面的创建方式我们可以看到，函数组件似乎比类组件写起来简单，那么函数组件能代替类组件码？

函数组件代替class组件

用函数组件代替类组件的时候，会有两个问题：

1. 函数组件没有state

• 用useState可以解决没有state的问题

2. 函数组件生命周期

• 用useEffect(解决副作用)可以解决生命周期问题

useEffect

• 模拟componentDidMount

useEffect(() =>{console.log("xxxx")},[])    //加一个[]表示只在第一次渲染

• 模拟componentDidUpdate

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

• 模拟componentWillUnmount

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

• constructor 组件执行的时候就相当于construtor

• 模拟shouldComponentUpdate React.memo和useMemo可以解决

• 模拟render 函数组件的返回值就是render的返回值