知识梳理---------Hooks钩子函数的使用

1 React Hooks介绍

1.1 React Hooks是用来做什么的

对函数型组件进行增强，让函数型组件可以存储状态，一个拥有处理副作用的能力。

组件中只要不是把数据转换成视图的代码，就是属于副作用

 例如：获取dom元素，为dom元素添加事件，定时器，发送AJAX请求等 都是属于副作用代码。在函数型组件当中我们要使用Hooks 来处理这些个副作用。

1.1.1 React Hooks功能总结

对函数型组件进行增强，让开发者在不使用类组件的情况下，实现相同的功能。

1.2 类组件的不足（hooks要解决的问题）

1. 缺少逻辑复用机制

   ✌️为了复用逻辑增加无实际渲染效果的组件，增加了组件层级 显示十分臃肿
   ✌️增加了调试的难度以及运行效率的降低
   

2. 类组件经常会变的很复杂 难以维护

   ✌️将一组相干的业务逻辑炒粉到了多个生命周期函数中
   ✌️在一个生命周期函数内存在多个不相干的业务逻辑
   

3. 类成员方法不能保证this 指向的正确性

2. React Hooks 使用

Hooks 意为钩子，React Hooks 就是一堆钩子，React通过这些钩子函数对函数型组件进行增强，不同的钩子函数提供了不同的功能，

2.1 ✅ userState()

userState()作用：用于函数组引入状态。

✌️在我们过往的使用中一个函数的变量在这个函数使用后就会被释放掉了。
✌️所以呢函数型组件在以往的的使用中是不可以保存状态的。
✌️而有了`useState()` 就可以让函数型组件保存状态。

// 计数器
import React,{
   useState} from 'react';
// 当我们点击之后组件会重新渲染，通过useState 保存状态
function App(){
   
	const [count,setCount]=useState(0);
	return <div>
		<span>{
   count}</span>
		<button onClick={
   ()=>setCount(count+1)}>+1</button>
		</div>;
}

2.1.1 useState()方法的使用细节

1. 接受唯一的参数即为状态初始值，初始值可以是任意类型数据
2. 返回值为数组，数组中存储状态值和更改状态值的方法，方法名称约定以wet开头，后面加上状态名称
3. 方法可以多次调用，用以保存不同状态值
4. 参数可以是一个函数，函数返回什么，初始状态就是什么，函数只会被调用一次，用在初始值是动态值的情况。

import React,{
   useState} from 'react';
// 当我们点击之后组件会重新渲染，通过useState 保存状态
function App(props){
   
// 4 设置默认值，写在setState 里面是只有在初始渲染仕调用如果写在外层会每次重新渲染App组件都会调用。
	const [count,setCount]=useState(()=>{
   
		return props.count || 0
	});
	const [person,serPerson]=useState({
   name:'dudu',age:'18'})
	return <div>
		<span>{
   count}{
   person.name}{
   person.age}</span>
		<button onClick={
   ()=>setCount(count+1)}>+1</button>
		<button onClick={
   ()=>setPerson({
   ...prerson,name:'嘟嘟'}}>+1</button>
		</div>;
}

2.1.2 设置状态值方法的使用细节

1. 设置状态值方法的参数可以是一个值也可以是一个函数
2. 设置状态值的方法本身是异步的

function App(props){
   

	const [count,setCount]=useState(()=>{
   
		return props.count || 0
	});
	const [person,serPerson]=useState({
   name:'dudu',age:'18'})
	function handleCount(){
   
	// 1.返回什么就是什么
		setCount((count)=>{
   
			let newCount=count + 1
			return count + 1
		})
		//2 异步的
		//document.title=count;
		document.title=newCount;
	}
	return <div>
		<span>{
   count}{
   person.name}{
   person.age}</span>
		<button onClick={
   handleCount}>+1</button>
		<button onClick={
   ()=>setPerson({
   ...prerson,name:'嘟嘟'}}>+1</button>
		</div>;
}

2.2 ✅ useReducer()

useReducer()作用：是另一种让函数组件保存状态的方式。

import React,