一、Hooks是什么?
Hook
是 React 16.8 的新增特性。它可以让你在不编写 class
的情况下使用 state
以及其他的 React
特性
至于为什么引入hook
,官方给出的动机是解决长时间使用和维护react
过程中常遇到的问题,例如:
- 难以重用和共享组件中的与状态相关的逻辑
- 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面
- 类组件中的this增加学习成本,类组件在基于现有工具的优化上存在些许问题
- 由于业务变动,函数组件不得不改为类组件等等
在以前,函数组件也被称为无状态的组件,只负责渲染的一些工作
因此,现在的函数组件也可以是有状态的组件,内部也可以维护自身的状态以及做一些逻辑方面的处理
二、有哪些?具体用法
1、useState
作用:为函数式组件提供动态属性
语法:let [默认数据变量, 修改数据的方法] = useState('默认数据')
-
修改 基本数据类型:修改这个数据的方法(最新的数据)
-
修改复杂数据类型 数组:修改数据方法(()=>{return [ ...新的数据]})
-
修改复杂数据类型 对象:修改数据方(()=>{...原数据state, 更新的属性数据})
// 引入useState import { useState } from "react"; // hooks 为函数式组件提供一个属性 // 作用 => 为函数式组件提供动态数据 // 语法 => let [默认数据变量,修改这个数据的方法] = useState('默认数据') // // 1. 修改的是 基本数据类型 // function App(){ // // 这里组件有一个动态的数据 // // let salary=1800; // // 动态的数据 =》 useState // let [salary,setSalary]=useState(1800); // const changeSalary=()=>{ // // 让salary => 改变值 => useState 处理的是基本数据类型 // // setSalary(最新的数据) => salary 是最新的数据 // setSalary(2000) // } // return ( // <div> // <h2>我的工资{salary}</h2> // <button onClick={()=>changeSalary()}>修改数据</button> // </div> // ); // } // // 2.修改复杂数据类型之 数组 // function App() { // // 动态数据 => 数组 // let [list, setList] = useState([" 标签:salary,return,Hooks,用法,react,let,组件,console,useEffect From: https://www.cnblogs.com/chccee/p/17134124.html