react hooks原始碼第一天useState

2022-04-10 08:21:44 字數 879 閱讀 9900

import react from 'react';

import reactdom from 'react-dom';

let hooksindex = 0

const hooksstate = 

const usestate = (initialvalue)=>

return [hooksstate[hooksindex++],setfunction]

}const couter = ()=>

}>btn1

}>btn2

}const render = ()=>

render()

這裡面最核心精妙之處在於,usestate(0)會暴露乙個number值和乙個setfunction,其中每使用乙個usestate,他們暴露出來的number和setfunction都不一樣,而且互相不影響,而且是閉包。把函式暴露在了外面,而且這個閉包還分別保留了哪乙個usestate的索引,讓我們每次呼叫索引為幾的usestate裡面的setfunction時,setfunction都知道去改變索引為幾的值。當然這些值都是儲存在了陣列裡面,所以setfunction才能在陣列裡面根據索引改變相應的值。

setfunction裡面:

每次改變了新的值,我們先render ,呼叫render我們就會重新把hooksindex置為0,而且元件會重新渲染,那面也就說const =usestate()      那兩行**會重新執行,所以此時又回到了第一次usestate

最後每次丟擲 [state,setfunction],當然這裡state其實是arr[index]這種形式,為啥要加1,因為下次,丟擲自動索引加1   ,為啥又保留了currentindex,這步完全是為了閉包,把索引儲存出去

ok今天的分享就到這裡了!!!!!!

Nacos原始碼一 原始碼啟動

一 nacos 原始碼本地啟動 官方單機啟動文件 將原始碼匯入到idea,然後開啟console專案中的配置檔案 按照nacos文件中單機啟動模式修改mysql配置 資料庫連線串需要有時區 useunicode true characterencoding utf8 servertimezone u...

LevelDB原始碼分析 第一印象

leveldb是google開源的nosql資料庫,被很多人推薦,因為良好的c 格式,咱們試圖來分析一下吧 leveldb db db leveldb options options options.create if missing true leveldb status status level...

Discuz NT原始碼分析 第一回

首先,從discuz.web應用程式看起,開啟index.aspx檔案,你一定會感覺到很奇異,竟然只有簡單的一行 然而你設定它為起始頁的時候,顯示的竟然是論壇首頁,這時你就應該想到是url重寫的問題了。那我們就到web.config去一 竟,會發現如下 12 3如何熟悉httpmodule的朋友,看...