函数组件

创建方式

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

// 方式二
const Hello = props => <div>{props.message}</div>

// 方式三
function Hello(props){
    return <div>{props.message}</div>
}

HooksAPI：useState解决函数组件没有state的问题（v16.8.0）

HooksAPI：useEffect解决函数组件没有审核生命周期的问题（v16.8.0）

• 模拟 componentDidMount

useEffect(()=>{console.log('第一次渲染')},[])    // []表示只在第一次渲染时调用

• 模拟 componentDidUpdate

useEffect(()=>{console.log('任意属性变更')})    // 无参表示任何state变化都执行
useEffect(()=>{console.log('n变了')}, [n])    // 数组内state变化才执行

小细节： 在页面第一次渲染时，state由undefined变成初始值，因此在一开始就会触发改该钩子打印一次。

【如何做到像类组件该钩子一样从第二次变化开始？参照文末自定义hook：useUpdate】

• 模拟 componentWillUnmount

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

示例代码：

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)=> {
    return (
        <div>Child</div>
    )
}

• constructor

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

• shouldComponentUpdate

后续《React造轮子》中的React.memo和useMemo可以解决

• render

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

自定义hook：useUpdate