React函数组件笔记

React函数组件

创建函数组件的法师

const Hello =(props)=>{
    return <div>{props.name}</div>
}
const Hello = props => <div>{props.name}</div>

function Hello(PROPS){
    return  <div>{props.name}</div>
}

函数组件代替class组件

面临的两个问题

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

解决没有State

React V16.18.0 推出 Hooks API

其中的一个API就做useState可以结局问题

示例

import React from "react";

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

解决没有生命周期

React V16.18.0 推出 Hooks API

其中的一个API就做useEffect可以结局问题

Hooks API（useEffect）

模拟（componentDidMount）

import React,{useEffect} from "react";
const App = (PROPS)=>{
    const [n,setN] = React.useState(0)
    const onClick = ()=>{
        setN(n+1)
    }
    useEffect(()=>{
        console.log('第一次渲染')
    },[])
    return(
        <div>
            <p>{n}</p>
            <button onClick={onClick}>+1</button>
        </div>
    )
}
export default App

模拟（componentDidUpdate）

import React,{useEffect} from "react";
import userEvent from "@testing-library/user-event";
const App = (PROPS)=>{
    const [n,setN] = React.useState(0)
    const onClick = ()=>{
        setN(n+1)
    }
    useEffect(()=>{
        console.log('第一次渲染')
    },[])
    useEffect(()=>{
        console.log('任意属性变更')
    })
    useEffect(()=>{
        console.log('n变啦')
    },[n])
    return(
        <div>
            <p>{n}</p>
            <button onClick={onClick}>+1</button>
        </div>
    )
}
export default App

模拟（componentWillUnmount）

import React,{useEffect} from "react";

const App = (PROPS)=>{
    const [n,setN] = React.useState(0)
    const [show,setShow]=React.useState(true)
    const onClick = ()=>{
        setN(n+1)
    }
    const fn1 = ()=>{
            setShow(false)
        }
    const fn2 = ()=>{
        setShow(true)
    }
    useEffect(()=>{
        console.log('第一次渲染')
    },[])
    useEffect(()=>{
        console.log('任意属性变更')
    })
    useEffect(()=>{
        console.log('n变啦')
    },[n])
    return(
        <div>
            <p>{n}</p>
            {show ? <Header/>:null}
            <button onClick={onClick}>+1</button>
            <button onClick={fn2}>显示</button>
            <button onClick={fn1}>隐藏</button>
        </div>
    )
}

const Header = ()=>{
    useEffect(()=>{
        return ()=>{
            console.log('我要消失啦')
        }
    })
    return(
        <div>我是Header组件</div>
    )
}
export default App

模拟（constructor）

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

模拟（shouldComponentUpdate）

React.memo和useMemo可以解决

模拟（render）

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

自定义（Hook）

实现功能（第一次由undefined变成0时不执行函数，后面变化了执行）

示例（useUpdate）

import React,{useEffect} from "react";

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

    useEffect(()=>{
        if(count>1){
            fn()
        }
    },[count])
}
const App = (PROPS)=>{
    const [n,setN] = React.useState(0)
    const onClick = ()=>{
        setN(n+1)
    }
    useUpdate(()=>{
        console.log('n变啦')
    },n)
    return(
        <div>
            <p>{n}</p>
            <button onClick={onClick}>+1</button>
        </div>
    )
}

export default App