React hooks

React hooks的提出 是基于React 16.8版本以上为前提的
它的出现 使得函数式组件 可以保存状态 和 享受 两个生命周期函数

componentDidMount 和 componentDidUpdate

他的使用规则是use打头的 比如useState 、useEffect、useContext等等
都需要从react当中结构出来使用

import {useState,useEffect,useContext...} from 'react'

举个例子
一、useState

function Example(){
	const [conut,setCount] = useState(0)  //0是count的初值
	return(
		<div>
				<p>You clicked me {count} times</p>
				<button onClick={
					()=>{ setCount(count+1) }}
				>Click here</button>
				//执行规则  调用setCount方法 并将count加1返回给count
		</div>
		)
}

二、useEffect 解决生命周期问题

function Example(){
	useEffect(()=>{
		console.log("hallo,nice to meet U ~ ")  // 你会发现在DidMount时打印
		// 在DidUpdate时又打印 也就是集成了两个钩子
	})
	return(
		<div>
			  see the console.log
		</div>
		)
}

生命周期 问题进阶

安装路由 使用路由 在路由跳转到 时候 观察到生命周期的问题
import {BroswerRouter as Router , route , Link}
function A(){
	useEffect(()=>{console.log("welcome to Page A")})
}
function B(){
	useEffect(()=>{console.log("welcome to  Page B")})
} 
function Dad(){
	return(
		<Router>
			<ul>
				<li><Link to="/">A Page</Link></li>  
				<li><Link to="/B/">B Page</Link></li>
			</ul>
			<Route path="/" exact component={A} />
			<Route path="/B/" component={B} />
		<Router>
)
}

路由可以正常调整 而且进入页面的时候也会打印

但是离开的时候怎么办呢？
只需要在 useEffect里面 再加一个解绑函数

 return ()=>{ console.log(" see U ") }

但是仍存在一个问题 就是状态发生变化的时候 解绑函数 依然触发
怎么办呢 怎么才能只在卸载组件 触发解绑函数呢 ？

有请useEffect的第二个参数 它是一个数组
该参数的作用是 检测 只有该参数发生变化的时候 才会触发解绑函数

	useEffect(()=>{
		console.log("你来了")
		return ()=>{
			console.log("你走； ")
}
}，[]) // 设为空  那么只有卸载组件 才会触发 这也是我们想要的

三、useContext 解决父子组件传值的问题
其实也很简单 父组件通过结构 createContext方法 创建独有数据源

const CountContext = createContext()

然后通过他的Provider方法注入数据 到包裹的 子组件里

<CountContext.Provider value={数据}>
	<A> 子组件 </A>
</CountContext>

创建子组件 使用react结构出的 useContext方法
并通过如下方法接受

function A(){
	let count = useContext(CountContext)
	return (
		<h2>{数据}</h2>
	)
}

四、useReducer

import  React , { useReducer } from ' react'
function A(){
	const [count, dispatch ] = useReducer((state,action)=>{
		switch(action){
			case 'add' : 
				return state+1
			case 'dec' : // 我不记得减法咋拼写了 好像是这吧
				return state-1
			default :
				return state
	}
} , 0) 
	// 注意 前后各有两个参数 
	// 前面 数据 和 派发类型
	// 后面 函数 和 数据初值
	// 函数 俩参 是  state 和 

	return(
		<div>
			<button onClick={()=>{dispatch("add")}}>加1</button>
			<button onClick={()=>{dispatch("dec")}}>减1</button>
		</div>
)
}

五、useRef
TA可以帮助你获取DOM元素和保存变量

import React , {useRef} from 'react'
function A(){
	const inputEL = useRef(null) //调用方法 传参 或者不传
	// 点击数据
	const onButtonClick = () => {
		inputEL.cirrent.value = "Hello"
	}
	return(
		<div>
			<input ref={inputEL} type="text"></input>  // 绑定ref
			<button onClick={onButtonClick}>展示文字</button>
		</div>
	)
}

保存变量 日后更新