Hooks详解（一）

在React中，创建组件的方式有两种：类式组件和函数式组件。对于刚刚学习react的我（小白）类式组件还是比较容易理解和学习，因为在之前有Vue的学习基础，React的类式组件和Vue的组件可以对比着进行学习，相对来说还是比较容易的。没有学习过类式组件的可以自行进行学习，在这里就不过多说明。本文章是本人在学习React Hooks所总结的，其中为了方便理解不乏一些大白话，望理解！
下面就开始Hooks的相关介绍吧！
对比类式组件来说函数式组件中没有状态和生命周期，这就是hooks所产生的原因，可以让函数式组件像类式组件一样，任意的进行使用。hooks中主要是一些hooks构造函数，这些钩子函数互相的搭配使用，实现我们想要的功能。hooks中的钩子函数主要包括:useState()、useEffect()、useCallbanck()、useMemo()、useref()、useContext()、**useRecuser()**这些，下面开始一个一个的进行说明。

useState()状态管理

通过useState()函数，我们就可以对函数式组件进行状态的设置和修改，首先这是一个无内容的App函数式根组件

import React from 'react'

export default function App() {
  return (
    <div></div>
  )
}

由于useState()方法是react中的方法，我们要想使用就需要引入，我们引入并使用useState()方法

import React, { useState } from 'react'  //使用解构将useState引入

export default function App() {
const [name, setName] = useState('xiaoming')
const [age, setAge] = useState(100)
  return (
    <div>{name}-{age}</div>
  )
}

这时就在App组件中创建出了状态名为name，状态值为“xiaoming”的状态，状态创建出来后我们进行访问就直接{name}。状态创建后我们怎样修改呢？这里就用到了setName方法了。

import React, { useState } from 'react'  //使用解构将useState引入

export default function App() {
const [name, setName] = useState('xiaoming')
const [age, setAge] = useState(100)
  return (
  	<div>
			<button
				onClick={() => {
					//修改状态调用上面定义的修改函数名，向函数中传入要修改为的值
					setName('xiaoli')
					setAge(90)
				}}
			>
				点击事件
			</button>
			App-{name}
			年龄-{age}
		</div>
  )
}

在事件函数中直接调用setName()将修改的值传入就可以了，在这里的效果就是点击按钮后name的值变为xiaoli,age的值变为90。
这样使用useState()方法后，该函数式组件就有状态了，并且可以创建多个状态。

useEffect(副作用函数)

在实际开发中，项目中的数据一般都是向后端发送请求得来的，在react中没有生命周期，我们发送请求的函数一般写在useEffect()函数中，那这个函数是怎样使用的呢。

useEffect()函数中有两个参数，第一个是一个回调函数，第二个是依赖数组
当数组为空，没有依赖时，useEffect()方法中的函数只会执行一次，状态发生变化组件更新也不会执行

import React, { useState，useEffect } from 'react'  //使用解构将useState引入

export default function App() {
const [name, setName] = useState('xiaoming')
useEffect(() => {}, [])
  return (
    <div>{name}</div>
  )
}

当数组中添加状态依赖后，该状态发生变化才会执行回调函数，其他状态改变也不会执行，数组中可以添加多个依赖，我理解的就相当于监听函数，当监听的状态发生变化才执行

import React, { useState，useEffect } from 'react'  //使用解构将useState引入

export default function App() {
const [name, setName] = useState('xiaoming')
useEffect(() => {
	console.log(1111111)
}, [name])
  return (
    <div>{name}</div>
  )
}

useEffect()的回调函数中，会return一个函数，当该组件销毁就会执行retuen的函数

import React, { useState，useEffect } from 'react'  //使用解构将useState引入

export default function App() {
const [name, setName] = useState('xiaoming')
	useEffect(() => {
	console.log("name状态值发生变化")
		return () => {
			console.log("组件销毁了")
		}
	}, [name])
  return (
    <div>{name}</div>
  )
}

useCallback(记忆函数)

场景：
我们定义了所有事件函数后，但组件的状态发生变化后，组件会更新状态重新渲染，我们定义的方法也会进行重新的定义和赋值即使方法没有变化，这样不利于优化，增加负担

在这里我们就使用useCallback方法，将我们定义的函数内容写在这个方法第一个参数中的回调函数中并且将useCallback方法函数赋予定义方法名（如下），第二个参数为依赖数组

import React, { useState，useCallback} from 'react'  //使用解构将useState引入

export default function App() {
const [num, setNum] = useState(0)
		var handleClick = useCallback(() => {
		setNum(num - 1)
	}, [num])
  return (
   	<div>
			<button onClick={handleClick}>-</button>
			{num}
			<button
				onClick={() => {
					setNum(num + 1)
				}}
			>
				+
			</button>
		</div>
  )
}

数组中没有依赖时，我们组件更新渲染也不会将我们定义的方法进行重新定义赋值,但是第二个数组参数为空时,就说明没有依赖,这时第一个参数的函数中变量是我们定义时的最初值,一直是不变的,要想进行更新,我们就需要将函数中使用的变量放入第二个数组参数中当作依赖,这时函数中的参数才会进行更新,当其他不相关状态进行更新时,就不会进行重新的定义

总体来说,在状态发生变化时,和该函数相关的状态就进行更新,不相关的还是最初定义的那个,不会在每次状态变化所以的函数都进行重新的定义了.

今天就先说这么多吧，大家也不要光看，自己练习完就非常的清楚了