常用 hook

• useState
  const [state, setState] = useState(initialState);

import React, {
    
     useState } from 'react';
import Child from './Children'


/*
    作用

    let [状态的值---属性名，修改状态的方法] = useState(状态的初始值--属性值)
    跟新前对象  跟新后字符串
*/
function App() {
    
    


    let [data, setName] = useState({
    
    
        name: "佳佳",
        age: 20
    });
    return <div >
        <
        Child data = {
    
     data }
    / > <
    button onClick = {
    
    
        () => {
    
    
            setName({
    
    
                name: "憨批",
                age: 23
            });
        }
    } > 变身 < /button>

    <
    /div>

}




export default App;

• useEffect
  类组件
  componentDidMount、componentDidUpdate 和 componentWillUnmount
  需要清除的副作用

import React, {
    
     useState, useEffect } from 'react'

function Child(props) {
    
    
    // console.log(props);
    let {
    
     data } = props;
    let [age, setAge] = useState(8);


    //点击长一岁
    useEffect(() => {
    
    
        console.log("挂载");
    }, []);


    //点击卸载
    useEffect(() => {
    
    
        return () => {
    
    
            console.log("不挂载")
        }
    }, [])


    //跟新了
    useEffect(() => {
    
    
        console.log("跟新了")
    }, [data])


    // useEffect(()=>{
    
    
    //     effect
    //     return()=>{
    
    
    //         cleanup
    //     }
    // },[input])


    return <div >
        <
        h1 > name: {
    
     data.name } < /h1> <
    h1 > age: {
    
     age } < /h1>  <
    button onClick = {
    
    
        () => {
    
    
            setAge(++age)
        }
    } > 长一岁 < /button> < /
    div >
}
export default Child;

• useRef

import React, {
    
     useState, useEffect, useRef } from 'react'

// let agaP = useRef();

function Child(props) {
    
    
    // console.log(props);
    let {
    
     data } = props;
    let [age, setAge] = useState(8);
    let agaP = useRef();


    let [txt, setTxt] = useState("文字")
        //点击长一岁
    useEffect(() => {
    
    
        console.log(agaP.current);

    });


    let massage = "hhh"
    return <div >
        <
        h1 > name: {
    
     data.name } < /h1> <
    h1 ref = {
    
     agaP } > age: {
    
     age } < /h1>  <
    button onClick = {
    
    
        () => {
    
    
            setAge(++age)
        }
    } > 长一岁 < /button> 

    <
    p > {
    
     txt } < /p> <
    input type = "text"
    value = {
    
     txt }
    onChange = {
    
    
        (target) => {
    
    
            setTxt(target.value)
        }
    }
    />  < /
    div >
}
export default Child;