React Hooks

什么是Hooks

Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。

React Hooks的优点

  1. 简洁
    从语法上来说,写的代码少了
  2. 上手非常简单
    • 基于函数式编程理念,只需要掌握一些JavaScript基础知识
    • 与生命周期相关的知识不用学,react Hooks使用全新的理念来管理组件的运作过程
    • 与HOC相关的知识不用学,React Hooks能够完美解决HOC想要解决的问题,并且更可靠
    • Mobx取代了Redux做状态管理
  3. 代码复用性更好
  4. 与Typescript结合更简单

React Hooks的缺点

  1. 状态不同步
    在异步操作的函数中访问的状态还是原来的状态的值
  2. useEffect依赖问题
    当useEffect依赖的数据变多后会导致频繁触发

React Hooks的注意事项

  1. 命名规范
    自定义Hooks的命名一律使用use作为前缀,形如:useXXX
  2. 仅在最外层调用React Hooks
  3. 仅从react函数中调用react Hooks
    在自定义Hooks或者组件中调用Hooks

stateHook

让函数也可以有state状态,并进行状态数据的初始化、读取和更新。

React.useState()

useState(initState):接收一个参数,这个参数作为状态的初始值。如果不设置初始值,默认为undefined。初始值也可以是一个对象或一个函数。

useState()函数返回一个数组,数组中的第一个元素是状态值,第二个元素是一个用于更新状态的函数。

jsx 复制代码
function Demo(){
    const [count,setCount] = React.useState(0);
}

如果这个参数是函数,状态的初始值是传递的函数的返回值。以函数形式赋值时,只在第一次初始化时用到函数的时候解析返回值,在内部作缓存,减少计算过程。

jsx 复制代码
function Demo(){
    const [count,setCount] = React.useState(()=>{
    	return 0
    });
}

useState()函数返回的用于更新状态的函数是异步更新状态的。为了获取更新状态后的值,我们可以使用useEffect()函数。

注意事项
  1. 当连续更新相同的状态时,组件不会连续渲染多次。

    这种情况,可以使用函数形式进行更新状态

    jsx 复制代码
    import {useState}from 'react';
    const [name,setName] = useState('');
    setName(()=>{
        return 'hello'
    });
    setName(()=>{
    	return 'hello'
    });
  2. 当更新的状态是一个对象时,需要使用一个新对象才会触发重新渲染。

    jsx 复制代码
    import {useState}from 'react';
    const [name,setName] = useState({name:'hekl'});
    name.name = 'hello';
    setName({...name});
useReducer

useReducer可以同时更新多个状态,当状态更新逻辑比较复杂就可以考虑使用useReducer。

useReducer(reducer,initState,initAction):

  • reducer:是一个函数,接受传入上一个状态和本次的行为,根据行为状态处理并更新状态。
  • initState:是初始化状态
  • initAction:是useReducer初次执行时被处理的行为

返回值是一个数组,数组的第一个元素是state即状态值,dispatch是用于更新状态的方法,它接受action作为参数。

先创建一个reducer

jsx 复制代码
export default function anyReducer(satate,action){
    switch(action.type){
        case 'update':
            return {...state, ...action.data}
        default:
            return state;
    }
}

在组件中引入

jsx 复制代码
import {useReducer} from 'react'
import anyReducer from './reducer'

function App(){
    const [state,dispatch] = useReducer(anyReducer,{
        name:'hello'
    });
    const clickButton = ()=>{
		dispatch({
            type:'update',
            data:{
                name:'world'
            }
        });
    }
    return <>
    <div>{state.name}</div>
    <button onClick={clickButton}>更新数据</button>
    </>
}
相关推荐
小飞悟4 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor4 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter5 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝6 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽7 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥8 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端
请你吃div13 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试
一个水瓶座程序猿.14 分钟前
Vue3 中使用 Vueuse
前端·javascript·vue.js
夏梦春蝉15 分钟前
ES6从入门到精通:Symbol与迭代器
前端·javascript·es6
一个水瓶座程序猿.18 分钟前
ES6数组的`flat()`和`flatMap()`函数用法
前端·ecmascript·es6