React组件

function App() {
    // const handleClick = () => {
    //     console.log("button clicked")
    // }

    // const handleClick = (e) => {
    //     console.log("button clicked")
    // }

    const handleClick = (name) => {
        console.log("button clicked", name)
    }

    const handleClick2 = (name, e) => {
        console.log("button clicked", name, e)
    }

    return (
        <div className="App">
            <button onClick={() => handleClick("jack")}></button>
            <button onClick={(e) => handleClick2("jack", e)}></button>
        </div>
    );
}

import {useState} from "react";

function App() {
    const [count, setCount]  = useState(0);

    const handleClick = () =>{
        setCount(count+1)
    }

    return (
        <div>
            <button onClick={handleClick}>{count}</button>
        </div>
    )
}

import {useState} from "react";

function App() {
    const [count, setCount] = useState(0);
    const [form, setForm] = useState({name: "jack"})

    const handleClick = () => {
        setCount(count + 1)
    }

    const changeForm =() => {
        setForm({...form, name:"john"})
    }

    return (
        <div>
            <button onClick={handleClick}>{count}</button>
            <button onClick={changeForm}>{form.name}</button>
        </div>
    )
}

import {useRef} from "react";

function App() {
    const inputRef = useRef(null)
    const showDom = () =>{
        console.dir(inputRef.current)
    }

    return (
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick={showDom}>获取dom</button>
        </div>
    )
}

function Son(props) {
    console.log(props)
    return <div>this is son, {props.name}, jsx: {props.child}</div>
}

function App() {
    const name = "this is app name"

    return (
        <div>
            <Son name={name} age={18} isTrue={false} child={<span>this is span</span>}></Son>
        </div>
    )
}

function Son(props) {
    console.log(props)
    return <div>this is son, {props.children}</div>
}

function App() {
    return (
        <div>
            <Son>
                <span>this is span</span>
            </Son>
        </div>
    )
}

 子传父

function Son({onGetSonMsg}) {
    const sonMsg = "this is son msg"
    return (
        <div>
            this is son
            <button onClick={()=>onGetSonMsg(sonMsg)}>sonMsg</button>
        </div>
    )
}

function App() {
    const getMsg = (msg) =>{
        console.log(msg)
    }

    return (
        <div>
            this is App
            <Son onGetSonMsg={getMsg}>
            </Son>
        </div>
    )
}

 状态提升

import {useState} from "react";

function A({onGetAName}) {
    const name = "this is A name"
    return (
        <div>
            this is A component
            <button onClick={() => onGetAName(name)}>send</button>
        </div>
    )
}

function B({name}) {
    return (
        <div>
            this is B component, {name}
        </div>
    )
}

function App() {
    const [name, setName] = useState('')
    const getAname = (name) => {
        console.log(name)
        setName(name)
    }

    return (
        <div>
            <A onGetAName={getAname}></A>
            <B name={name}></B>
        </div>
    )
}

export default App;

context机制

import {createContext, useContext} from "react";

const MsgContext = createContext()
function A() {
    return (
        <div>
            this is A component
            <B/>
        </div>
    )
}

function B() {
    const msg = useContext(MsgContext)
    return (
        <div>
            this is B component, {msg}
        </div>
    )
}

function App() {
    const msg = 'this is app msg'

    return (
        <div>
            <MsgContext.Provider value={msg}>
                this is App
                <A/>
            </MsgContext.Provider>
        </div>
    )
}

export default App;

 

import {useEffect} from "react";



function App() {
    useEffect(() => {
    }, []);

    return (
        <div>this is app
        </div>
    )
}

export default App;

清除副作用

import {useEffect, useState} from "react";

function Son(){
    useEffect(() => {
        const timer = setInterval(()=>{
            console.log("定时器执行中...")
        }, 1000)

        return ()=>{
            //清除副作用
            clearInterval(timer)
        }
    }, []);
}

function App() {
    const [show, setShow] = useState(true)

    return (
        <div>
            {show && <Son/>}
            <button onClick={()=>setShow(false)}>卸载Son</button>
        </div>
    )
}

export default App;

自定义hook

import {useEffect, useState} from "react";

function useToggle(){
    const [value, setValue] = useState(true)

    const toggle = () => setValue(!value)

    return {
        value, toggle
    }
}

function App() {
    const {value, toggle} = useToggle()

    return (
        <div>
            {value && <div>this is div</div>}
            <button onClick={toggle}>toggle</button>
        </div>
    )
}

export default App;

React Hook 使用规则

1. 只能在组件或者其他自定义hook函数中使用

2.只能在组件的顶层调用，不能嵌套在if，for其他函数中