常用 hook

常用 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;