react-函数组件

创建方式

---

// 创建方式

export const FuncComponent = (props) => {
    return <div>函数组件创建方式1</div>
}


export const FuncComponent = (props) => <div>函数组件创建方式2</div>

export function FuncComponent(props){
    return <div>函数组件创建方式3</div>
}

函数组件代替类组件的问题

---

• 函数组件没有state ==> React v16.8.0推出Hooks API，其中的一个API叫做useState可以解决问题
• 函数组件没有生命周期 ==> React v16.8.0推出Hooks API，其中的一个API叫做useEffect可以解决问题

export const FuncComponent = (props) => {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count+1)
    }
    return <div>
        <h1>{count}</h1>
        <button onClick={handleClick}>更新</button>
    </div>
}

类组件和函数组件的区别

---

灵魂三问

• 是否有this
• 是否有生命周期
• 是否有状态state

类组件	函数组件
有生命周期	没有生命周期
class创建	函数 return 创建
有状态存储	依赖Hook完成状态存储
有this指向问题	没有this
消耗大，需要创建实例，且不能销毁	消耗少，得到结果就销毁