React框架-浅谈Hooks

---

一、Hooks简介

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

Hooks(只适用于函数式组件)
实际上就是一套API,它可以让无状态组件（函数式组件）拥有像类组件一样的特性
这些特性包括：state、生命周期、上下文、ref等等

---

二、为什么使用Hooks

Hook是向下兼容的，不包含任何破坏性改动。它解决了在组件之间复用状态逻辑很难的缺陷，可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷，并且性能更高。

---

三、使用 State Hook

1、useState

返回值为：当前 state 以及更新 state 的函数。

import React, { useState } from 'react';

function Example() {
	// 声明一个叫 “count” 的 state 变量
	const [count, setCount] = useState(0);
	//useState() 方法里面唯一的参数就是初始 state

声明了一个叫 count 的 state 变量，然后把它设为 0。React 会在重复渲染时记住它当前的值，并且提供最新的值给我们的函数。我们可以通过调用 setCount 来更新当前的 count。

---

四、使用 Effect Hook

1、useEffect

Effect Hook 可以让你在函数组件中执行副作用操作

import React,{useState,useEffect} from "react"

export default function TestHooks(props){
	//useState的语法
	const [count,setCount] = useState(100)
	const [bol,setBol] = useState(true)
	const [list,setList] = useState([])
	let timer = null
	
	function changeCount (){
		setCount(count+1)
	}
	
	//useEffect(fn,[])
	useEffect(()=>{
		//相当于是componentDidMount() 的功能
		//在这里可以调接口、开定时器、开长连接
		timer = setInterval(()=>{
			console.log(1)
		},1000)
		return ()=>{
			//相当于 componentWillUnmount() 的功能
			//在这里关闭定时器、关闭长连接
			clearInterval(timer)
		}
	},[count])
	//[count] 相当于componentDidUpdate() 的功能
	
	useEffect(()=>{
		//相当于是Vue中的mounted()
		setList([1,2,3,4])
		//return undefined 或者不写
	},[])
	
	//标准写法
	useEffect(()=>{
		document.title = "2006"
		//return undefined 或者不写
	})
	
	function createList(){
		return list.map(ele=>(
			<div key={ele}>{ele}</div>
		))
	}
	
	return(
		<div>
			<h1>测试Hooks</h1>
			<h3>{count}</h3>
			<button onClick={changeCount}>增加</button>
			<hr/>
			{
				createList()
			}
		</div>
	)
}

你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

---

2、useEffect的常见问题

2-1 为什么要在 effect 中返回一个函数?

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于effect 的一部分

2-2 React 何时清除 effect？

React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect之前对上一个 effect 进行清除。

2-3 effect 中的是否必须要返回?

useEffect 可以在组件渲染后实现各种不同的副作用。有些副作用可能需要清除，所以需要返回一个函数,如果不需要清理,就不用返回

2-4 组件中可以包含多个useEffect

使用多个 Effect 实现关注点分离,也就是说组件中可以多个useEffect进行处理逻辑代码,按照不同的代码业务分离他们