React函数组件

函数组件

内容
1.创建方式
2.函数组件没有state怎么办
3.函数组件没有生命周期怎么办
4.自定义hooks函数

函数组件的创建方式

两种形式
1' 声明一个变量等于箭头函数
const Hello = (props) => {
    
  return <div>{
   props.message}</div>
}
//箭头函数可以缩写
const Hello = props => <div>{
   props.message}</div>

2' 使用function
function Hello(props){
   
  return <div>{
   props.message}</div>
}

消除了this
函数组件能代替Class组件吗？
完全可以,但是目前不行,我们要学些新的东西，比如hooks API

函数组件代替Class组件

面临两个问题
1.函数组件没有state
React v16.8.0推出Hooks API
其中的一个API叫做useState可以解决问题
2.函数组件没有生命周期
React v16.8.0推出Hooks API
其中的一个API叫做useEffect可以解决问题
useEffect(函数式编程的专有名词)是专门用来解决生命周期的问题的。

1.函数组件没有state怎么办？
React提供了useState并提供读、写2个API,可以对数据进行读、写操作。
第1个参数是读，第2个参数是写，初始值为0。
需要引入useEffect或者直接React.useEffect

const App = props => {
    
    const [n, setN] = React.useState(0) 
    const onClick = () => {
   
        setN(n + 1)
    }
    return (
        <div>{
   n}
            <button onClick={
   onClick}> +1 </button>
        </div>
    )
}

函数组件模拟生命周期

什么叫生命周期？
当处于某个阶段时会有提醒要不要做什么事(渲染、挂载、更新、卸载）

用useEffect模拟3个重要的生命周期
一.通过useEffect模拟/实现第一次渲染
细节:useEffect默认每次渲染都会调用(只有1个参数)，利用第2个参数[]指明只在第1次渲染时调用该函数。

import React, {
    useEffect } from "react" 
//需要引入useEffect或者直接`React.useEffect`

const App = props => {
   
  const [n, setN] = React.useState(0)
  const onClick = () => {
   
    setN</