php网站开发实例教程 源代码个人网站建设

什么是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的机制有关

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

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

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

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

useEffect(fn) -----监控所有数据的变化，一旦有数据变化就会执行该函数
useEffect(fn,[]) -----空数组，表示不监控任何数据的变化，只在挂载的时候执行一次
useEffect(fn,[a]) -----监听某一个数据的变化，只有这个数据变化了，才会再次执行useEffect(()=>{//组件卸载后执行return中的内容return ()=>{//console.log("完毕");}
})

useRef

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

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

import './App.css';
import {useEffect,useRef} from "react";function App() {let p1=useRef(null); //一般初始值给nulllet 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;