React 函数组件详解

创建方式

函数组件

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

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

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

函数组件代替 class 组件

面临两个问题

• 函数组件没有 state
• 函数组件没有生命周期

没有 State

• React v16.8.0 推出 Hooks API
• 其中一个 API 叫做 useState 可以解决问题

没有生命周期

• React v16.8.0 推出 Hooks API
• 其中一个 API 叫做 useEffect 可以解决问题

useEffect(模拟生命周期)

模拟 componentDidMount

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

模拟 componentDidUpdate

• useEffect(()=>{ console.log('任意属性值变更')} )
• useEffect(()=>{ console.log('n变了')}, [n] )
• 自定义 Hook--useUpdate

import { useState, useEffect } from "react/cjs/react.development";

const useUpdate = (fn, dep) => {
    const [count, setCount] = useState(0)
    useEffect(() => {
        setCount(x => x + 1)
    }, [dep]);

    useEffect(() => {
        if (count > 1) {
            fn();
        }
    }, [count, fn]);
}

export default useUpdate;

模拟 componentWillUnmount

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

• 例子

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(() => {
    console.log('渲染或者变化了')
    return () => {
      console.log('Child 销毁了')
    }
  })
  return (
    <div>Child</div>
  )
}

export default App; 

constructor

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

shouldComponentUpdate

• React.memo 和 useMemo 可以解决