【 React 】Hook 的那些事！

1、Hook 是什么

官方介绍：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

2、Hook 的Api

1、useState 设置类组件中的state import React, { useState } from "react"; // useState: 可以在函数式组件中声明和修改状态 //函数式组件 function App() { //使用hook来定义state //获得state，和修改state的函数。 const [value, setValue] = useState("123"); 如果初始值比较复杂，可以用一个函数包裹，返回一个复杂对象。 const [userInfo, setUserInfo] = useState(getUserInfo); //如果需要定义多个状态，就调用多次useState return ( <div> <p>value: {value}</p> <input type="text" value={value} onChange={onChangeAction} /> <input type="text" value={value} onChange={onChangeAction()} /> // 这里加不加括号结果 都是一样的。应该在内部做了判断吧。 </div> ) // 输入框的修改事件 const onChangeAction = (ev) => { //调用上面定义的修改函数,要返回一个新的state，保证state的属性是不可变量。 setValue(ev.target.value); }; const getUserInfo = ()=>{ return { a:1, b:2 } } } export default App 2、useEffect 用来模拟 类组件中的各种生命周期钩子函数 //解构出`effect` // useEffect: 需要有一组依赖的state，如果依赖的state发生变化， 那么回调就会执行。 import React, { useState, useEffect } from "react"; ... //下面是函数组件内部代码 const [value, setValue] = useState("123"); // effect // 只要组件的所有state/props发生变化就执行。以及初始化也会执行 useEffect(()=>{ console.log('1 useEffect run.......'); }); // 如果第二个参数提供了数组，数组中只能是state的值或者props的值 // 只有依赖发生变化，回来哦函数才执行。并且判断是否发生变化，比较的是状态的引用。 useEffect(()=>{ console.log('2 useEffect run.......'); }, [value, props.data]); // 如果第二个参数为空数组，那么第一个回调就相当于class组件的componentDidMount useEffect(()=>{ console.log('3 useEffect run.......'); //而且在effect函数中是可以拿到DOM对象的 }, []); useEffect(()=>{ console.log('4 useEffect run.......'); console.log(document.querySelector('#flag').innerHTML); // 返回的函数，会在下一次渲染完组件后，执行下一次的useEffect前，先调用上一次返回的useEffect返回的函数。 return (...rest)=>{ console.log('4 useEffect return func run.......'); console.log(document.querySelector('#flag').innerHTML); } }); useEffect(()=>{ console.log('5 useEffect run.......'); return ()=>{ // 当依赖为空时，useEffect返回的函数，相当于class组件的componentWillUnmount console.log('5 useEffect return func run.......'); } }, []); //暂时Hook 只能模拟这几个钩子函数 3、useRef 用来拿到DOM对象，类组件中的 React.createRef 一样。 import React, { useRef } from 'react' ... //下面是函数组件内部代码 let h4DOM = useRef(); return ( //用法和类组件中一样,都是从current中取值。 <h4 ref={h4DOM}>test</h4> // console.log(h4DOM.current); ) 4、useContext 提供数据的用法和类组件是一样的，不同点在于消费数据。 //初始化仓库数据，可以用useState，同时提供数据和修改数据的方法。 const [value, setValue] = useState(1) <DataContext.Provider value={{ value, setValue, //将属性和修改属性的方法，一起存在仓库中 }} > <div className="app"> <One /> <hr /> <Two /> </div> </DataContext.Provider> //调用的时候 import React, {useContext} from 'react' import DataContext from '../context/DataContext' import ThemeContext from '../context/ThemeContext' export default function Two() { const context = useContext(DataContext); console.log(context); const context2 = useContext(ThemeContext); console.log(context2); return ( <div> <h1>{context.value}</h1> <button onClick={()=>{ context.setValue(context.value+1); }}>修改</button> </div> ) } 5、useCallback 该hook，保证了某一些特殊函数，只执行一次，避免过多执行而消耗性能，第一个参数是想只执行一次的函数体，第二个参数可以是函数体用到的依赖状态。 import React, { useEffect, useState, useCallback } from 'react' const list = []; export default function App() { console.log('render.....'); const [value, setValue] = useState(''); // useCallback作用：声明一次函数，当组件再次渲染，取上次渲染时声明的函数直接使用。 // 但是，当依赖发生变化时，又会重新声明一次函数。 // 如果在组件中定义局部的函数，那么就是用useCallback包裹，注意useCallback的依赖一定要正确。 const valueChange = useCallback((ev)=>{ console.log(value); setValue(ev.target.value); }, [value]); useEffect(()=>{ list.push(valueChange); console.log(list.length); if(list.length === 2){ console.log(list[0] === list[1]); } }); return ( <div className="app"> <h1>value: {value}</h1> <input type="text" value={value} onChange={valueChange}/> </div> ) } 6、useMemo 相当于计算属性，只有依赖的值发生变化，才会执行memo包裹的函数。 import React, { useState, useCallback, useMemo, memo } from "react"; function One() { console.log("render............"); const [a, setA] = useState(1); const [b, setB] = useState(2); const [c, setC] = useState(3); const list = []; // useMemo相当于计算属性 // 第一个参数是个函数，需要返回计算的属性，第二个参数是依赖，依赖发生变化，重新计算属性。 const result = useMemo(() => { // 计算属性的代码 var result = 100; for (var i = 1; i <= a && i <= b; i++) { console.log("计算最大公约数..."); if (a % i === 0 && b % i === 0) { result = i; } } // 计算得到的属性，需要返回出去 return result; }, [a, b]); console.log(result); const btn1Action = useCallback(() => { setA((a) => a + 1); }, []); const btn2Action = useCallback(() => { setB((b) => b + 1); }, []); const btn3Action = useCallback(() => { setC((c) => c + 1); }, []); return ( <div> <p>A: {a}</p> <p>b: {b}</p> <p>求A，B的最大公约数：{result}</p> <p>c: {c}</p> <button onClick={btn1Action}>修改A</button> <button onClick={btn2Action}>修改B</button> <button onClick={btn3Action}>修改C</button> </div> ); } export default memo(One); 7、useHistory 与 useLocation 与 useMatch 用来获取路由参数，相当于类组件中的 withRouter 高阶组件。 import React from "react"; import { useHistory, useLocation ,useRouteMatch ,useParams } from "react-router-dom"; //在类组件中除了 利用 component 属性来跳转的路由，其他都拿不到上面三个属性，需要用到高阶组件 withRouter包裹才能用到。 //利用Hook 就可以直接拿到。但是要是在Router的包裹范围内。 export default function Two(props) { const history = useHistory(); console.log(history); const location = useLocation(); console.log(location); } 8 、useSelect 与 useDispatch 与 useStore 用来获取store中的数据和方法。类组件中用到高阶组件 content import React from 'react' import { useCallback } from 'react'; import {useSelector, useDispatch, useStore} from 'react-redux' export default function One(props) { // 获取redux仓库中的数据 const val = useSelector(state=>{ return state.value; }); // 获取dispatch const dispatch = useDispatch(); const btnAction = useCallback(()=>{ dispatch({type: 'modify-value', value: 'hello'}); }, [dispatch]); // 获得仓库 const store = useStore(); console.log(store); return ( <div className="one"> <h1>one组件</h1> <h2>{val}</h2> <button onClick={btnAction}>修改value</button> </div> ) }