【React】什么是 Hook

useState
useEffect
useRef

什么是hook？16.8版本出现的新特性。可以在不编写class组件的情况下使用state以及其它的React特性

为什么有hook？class组件很难提取公共的重用的代码，然后反复使用；不编写类组件也可以使用类组件的状态state。hook解决函数组件很多功能的问题（state \ 生命周期 \ ref）

hook都是以useXxx开头，并且必须在函数组件内部使用，不能在外面用，否则报错

useState

使用时需要 import {useState} from "react";

let [a,setA]=useState(1);
a：变量名，setA：设置前一个参数的函数，useState(初始化值)：此函数返回一个数组对象[]

值：初始化的值，函数：为了修改设置的初始值

setXxx(修改值的方法)，这个函数是一个异步函数
调用完不会立刻执行，而是等待页面上所有需要的内容修改完毕之后执行，和虚拟dom的机制有关

js 复制代码

import './App.css';
// import {Component} from "react";
import {useState,useEffect} from "react";
//引入子组件
import DoubleKill from "./DoubleKill";
import TripleKill from "./TripleKill";

//函数组件
function App() {
    // let a=1; //声明了页面要使用的数据
    let [a,setA]=useState(1)
    let [b,setB]=useState(true)
    let [arr,setArr]=useState([1,2,3,4,5])

    let [c,setC]=useState(0)
    let Com;
    if(c===0){
        Com=<DoubleKill/>
    }else{
        Com=<TripleKill/>
    }

    useEffect(()=>{ //组件一加载就会执行，看做ComponentDidMount，只要数据发生变化它就会执行一次
        console.log("a---useEffect")
    },[a])
    useEffect(()=>{
        console.log("b---useEffect")
    },[b])


  return (
    <div className="App">
        <h2>我的react-APP</h2>
        {/*<h1>{a}</h1>
        <button onClick={()=>{
            a=2;
            console.log(a) //页面并不会更新（因为这里的数据不是响应式数据）
        }}>修改</button>*/}

        <h1>{a} / {b?"真":"假"}</h1>
        <ul>
            {arr.map((v,i)=>{
                return <li key={i}>{v}</li>
            })}
        </ul>
        <button onClick={()=>{
            let _a=a*2;
            setA(_a);
            let _arr=[...arr];
            _arr.push(arr.length+1);
            setArr(_arr)
            // console.log(a,b) 异步
        }}>修改a / arr</button>
        <button onClick={()=>{
            setB(!b);
        }}>修改b</button>

        <hr/>
        <button onClick={()=>{setC(0)}}>展示DoubleKill组件</button>
        <button onClick={()=>{setC(1)}}>展示TripleKill组件</button>
        {Com}
    </div>
  );
}


//类组件
/*class App extends Component{
    render(){
        return(
            <div className="App">
                <h2>我的react-APP</h2>
            </div>
        )
    }
}*/

export default App;

useEffect

组件挂载后和更新数据后都会执行，并且可以在函数组件中多次使用

javascript 复制代码

useEffect(()=>{ 
    console.log("a---useEffect")
},[a])

useEffect(()=>{
    console.log("b---useEffect")
},[b])

如果只想挂载后执行，更新数据不执行呢？useEffect的第二个参数，是一个数组

javascript 复制代码

useEffect(fn) -----监控所有数据的变化，一旦有数据变化就会执行该函数
useEffect(fn,[]) -----空数组，表示不监控任何数据的变化，只在挂载的时候执行一次
useEffect(fn,[a]) -----监听某一个数据的变化，只有这个数据变化了，才会再次执行

useEffect(()=>{
	//组件卸载后执行return中的内容
	return ()=>{
		//console.log("完毕");
	}
})

useRef

函数组件中使用useRef拿页面节点

javascript 复制代码

let p2=useRef(null);
<p ref={p2}>p2</p>
console.log(p2.current); //拿到p2节点

javascript 复制代码

import './App.css';
import {useEffect,useRef} from "react";

function App() {
  let p1=useRef(null); //一般初始值给null
  let p2=useRef(null);

  useEffect(()=>{
    console.log(p1.current)
    console.log(p2.current)
  })

  return (
    <div className="App">
      <p ref={p1}>p1</p>
      <p ref={p2}>p2</p>
    </div>
  );
}

export default App;