useEffect 原理

本文详细探讨了React中useEffect钩子的工作原理。当使用useEffect时,首先检查第一个参数是否为函数,然后判断第二个参数。如果第二个参数未定义,则直接执行回调函数。若第二个参数是一个数组,会将其存储在二维数组中,并通过下标跟踪。当数组内容发生变化时,通过every方法检查当前值与存储值的匹配情况,不匹配则执行回调,匹配则不做处理并更新存储的值。下标递增以处理多个useEffect实例。
摘要由CSDN通过智能技术生成


import React from "react";
import ReactDOM from "react-dom";

let state = []; // 为了可以储存多个值
let setters = []; // 存储改变值的方法
let stateIndex = 0; // 根据这个下标查找对应的值和改变值的方法
function useState(initialState) {
   
    // 1. 因为useState可以调用多次,单独一个变量无法存储多个值,所以使用数组进行存储
    state[stateIndex] = state[stateIndex] ? state[stateIndex] : initialState; // 每次改变值都会重新渲染,每次渲染都会重新调用useState方法,这个判断是为了组件渲染前是否有存储过值,如果有就取出来,如果没有就取初始传递的值
    // 2. 将改变值的方法存储到数组中
    setters.push(createSetter(stateIndex))
    // 3. 根据下标在存储值的数组查出值,根据下标在存储改变方法的数组查出方法
    let value = state[stateIndex]
    let setter = setters[stateIndex
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值