react中的HOOK

react中的HOOK

react的生命周期
react的路由v6版本与v5版本的差别

---

前言

Hook 是⼀些可以让你在函数组件⾥“钩⼊” React state 及⽣命周期等特性的函数。
Hook 不能在 class 组件中使⽤⸺这使得你不使⽤ class 也能使⽤ React。

---

一、useState()

为函数式组件提供状态
useState():会返回数组，第一个是初始值（可为任何基础数据类型），第二个是修改函数。

import React, { useState } from 'react'; 
function Example() {
 // 声明⼀个叫 “count” 的 state 变量,为0。setCount修改函数。
const [count, setCount] = useState(0);
const [my, setCount] = useState({num:0});
 return ( 
	<div>
  		<p>You clicked {count} times</p> 
  		<button onClick={() => setCount(count + 1)}> Click count	</button>
  		<button onClick={() => setCount(my.num + 1)}> Click my	</button>
	</div>
 );
}

它和setState一样是异步。短时间多个更改会合并为一个。并且它是按顺序存储。所以不能放在条件判断里使用useState()。

if(true){
	const [count, setCount] = useState(0);
}
//这种是错误写法，不能放在条件判断里使用useState()。

二、useEffect()

相当于函数组件的生命周期
接收一个函数和数组当参数。函数是触发后会执行的部分，数组是需要监控的数据，数组中
它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的⽤途，
只不过被合并成了⼀个 API。下面是对比的例子

给数组传值，监控数组里的值。发生变化就触发。不在数组中的数据不会影响
  //当age发生变化之后的周期
    useEffect(()=>{
    	console.log("我数据发生了变化")
  	},[age])
  	
如果没传数组，监控所有数据。相当于类组件中数据发生变化之后的周期，
  //compomentDidUpDate当 props 或 state 发生变化之后的周期
    useEffect(()=>{
    	console.log("我数据发生了变化")
  	})
  	
如果传空数组，则不监控数据，就完全相当于组件渲染之后的周期compomentDidMount
  //compomentDidMount在组件挂载之后
    useEffect(()=>{
    	console.log("我挂载了")
  	},[])
  	
还有其返回值会在组件卸载之前返回，相当于组件卸载之前的周期
   //compomentWillUnmount组件卸载之前
	useEffect(()=>{
	   console.log("我执行了")
	  return ()=>{
	   console.log("我卸载了")
	  }
	})

但要注意，渲染之后useEffect()是肯定会执行一次，上面所有例子，都会在渲染之后执行一次。如果不想页面初次渲染时执行，可以使用自定义 hook

function useDidUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);
  useEffect(() => {
    if (didMountRef.current) fn();
    else didMountRef.current = true;
  }, inputs);
}

三、useContext()

⽤来解决跨组件之间传值的问题

先使用React Context API，在组件外部建立一个 Context，使用Context.Provider标签包住后代组件，用value属性传值给后代组件。在后代组件中使用useContext(Context)获取到传递的数据。

//第⼀步我们需要创建⼀个单独的⽂件，创建我们的上下⽂对象Context并导出
const Context=createContext()
export default Context;

{/* 在⽗组件中引⼊上下⽂对象,使用Context.Provider标签来包住子组件组件,要传递的数据通过Provider提供出去*/}
import Context from './context';
import Child from "./Child"
const [count, setCount] = useState("⽗数据中的数据");
 <Context.Provider value={count}>
   <div>我是父组件</div>
   <My></My>
 </Context.Provider>

{/* 在子组件中使用useContext(Context)获取到传递的数据。 */}
import React ,{useContext}from 'react'
import Context from './context';
function Chile(){
const reContext=useContext(Context)
  return (
    <div>我是子组件,这是父组件的数据：{reContext}</div>
  )
}

总结

这是3个最基本，也是最常用的hook。