什么是ReactHook？首先是react16.8引入的一个概念，也就是说如果你的react版本低于16.8是不能使用的，所以使用的时候一定要注意react的版本。它对功能组件的功能进行了升级，只能在类组件中使用的状态、上下文等在功能组件中也可以使用。Reacthooks一般都是从use开始的，比如useState，useEffect。通过这种方式，我们可以在功能组件中使用react库的功能。相比于类组件，ReactHook的优势更被函数组件所理解。类组件中的this关键字和事件绑定很麻烦。使用reacthook后，可以避免这些问题。与类组件相比，你会发现功能组件的代码少了很多，代码看起来很简洁，使用起来也很方便。虽然官方没有说去掉类组件，但是官方更倾向于使用函数组件。如果你是React新手，强烈建议你使用ReactHook。使用reacthook的几个准则reacthook虽然很方便，但是写起来要遵循几个原则。Reacthooks仅在组件的顶层可用，这意味着您不能在循环、条件或嵌套函数中使用它们。返回前使用它很方便。只在react函数中使用hooks，不要在普通的js函数中使用，当然你可以在自定义hooks中使用hooks。React常用的内置hook（一）useState顾名思义，通过使用useState，我们可以创建、更新和操作state。useState在函数组件中使用起来非常简单，通过返回一个状态变量和一个函数来更新状态变量。import{useState}from"react";functionCounter(){//声明一个新的状态变量，我们称之为"count"const[count,setCount]=useState(0);return(
当前购物车数量：{count}setCount(count-1)}>添加到购物车setCount(count+1)}>Removefromcart
);}(2)useEffect在react的生命周期中，我们有componentDidMount、componentDidUpdate、componentWillUnmount等方法，以及useEffect集成了这些方法。useEffect主要用于Api数据请求，改变状态变量等。useEffect有两个参数，一个是要运行的函数，一个是包含组件的props、context、state等变量的数组。如果后面没有依赖数组，说明每次渲染都要执行第一个参数的函数。import{useState,useEffect}from"react";functionCounter(){//声明状态变量const[count,setCount]=useState(0);const[product,setProduct]=useState("鸡蛋");useEffect(()=>{console.log(`${product}将统治世界！`);},[product]);return(当前{product}的数量：{count}setCount(count+1)}>AddtocartsetCount(count-1)}>从购物车中移除更改产品：{""}setProduct(e.target.value)}/>
);}(3)useContext提供了一个方法，允许整个应用的所有组件访问数据，相当于声明了一个全局变量。无论如何嵌套或使用，其他组件始终可以访问和使用它。它只有一个参数，即React.createContext函数的返回值。importReactfrom"react";//一些模拟上下文值constusers=[{name:"HarryPotter",occupation:"Wizard",},{name:"KentClark",occupation:"Superhero",},];exportconstUserContext=React.createContext(users);importReact,{useContext}from"react";import{UserContext}from"./App";exportfunctionUserProfile(){constusers=useContext(UserContext);return({users.map((user)=>(我是{user.name}我是{user.occupation}！ ))}
);}(4)useReducer这是一个类似于useState的hook，唯一不同的是它允许状态更新，操作逻辑更复杂。它接收两个参数，一个是更新函数，一个是初始状态。它有两个返回值，一个是正在处理的状态，一个是被调度的函数。简单理解就是useReducer通过提供的update函数对state进行相应的更新。import{useReducer}from"react";importReactDOMfrom"react-dom";constinitialTodos=[{id:1,title:"Todo1",complete:false,},{id:2,title:"Todo2",complete:false,},];constreducer=(state,action)=>{switch(action.type){case"COMPLETE":returnstate.map((todo)=>{if(todo.id===action.id){return{...todo,complete:!todo.complete};}else{returntodo;}});默认值：返回状态；}};functionTodos(){const[todos,dispatch]=useReducer(reducer,initialTodos);consthandleComplete=(todo)=>{dispatch({type:"COMPLETE",id:todo.id});};return(<>{todos.map((todo)=>(