介绍PreactSignals

1銆備粈涔堟槸淇″彿锛烻ignals鏄竴绉嶅鐞嗙姸鎬佺殑鏂瑰紡锛屽€熼壌浜哠olidJS锛屽惛鏀朵簡瀹冪殑澶ч儴鍒嗕紭鐐广€傛棤璁哄簲鐢ㄧ▼搴忓涔堝鏉傦紝瀹冮兘鑳戒繚璇佸揩閫熷搷搴斻€備俊鍙风殑鐙壒涔嬪鍦ㄤ簬鐘舵€佸彉鍖栦細浠ユ渶鏈夋晥鐨勬柟寮忚嚜鍔ㄦ洿鏂扮粍浠跺拰UI銆係ignals鎻愪緵浜嗗熀浜庤嚜鍔ㄧ姸鎬佺粦瀹氬拰渚濊禆璺熻釜鐨勫嚭鑹蹭汉浣撳伐绋嬪锛屼互鍙婇拡瀵硅櫄鎷烡OM浼樺寲鐨勭嫭鐗瑰疄鐜般€?.涓轰粈涔堟槸淇″彿锛?.1鐘舵€佺鐞嗙殑鍥板闅忕潃搴旂敤瓒婃潵瓒婂鏉傦紝椤圭洰涓殑缁勪欢涔熶細瓒婃潵瓒婂锛岄渶瑕佺鐞嗙殑鐘舵€佷篃浼氳秺鏉ヨ秺澶氥€備负浜嗗疄鐜扮粍浠剁姸鎬佸叡浜紝涓€鑸渶瑕佸皢鐘舵€佹彁鍗囧埌缁勪欢鐨勫叡鍚岀鍏堢粍浠朵笂锛岄€氳繃props鍚戜笅浼犻€掋€傞棶棰樻槸鏇存柊鏃讹紝鎵€鏈夊瓙缁勪欢閮戒細鐩稿簲鏇存柊銆傞渶瑕侀厤鍚坢emo锛屼娇鐢∕emo鏉ヤ紭鍖栨€ц兘銆傝櫧鐒惰繖鍚捣鏉ュ緢鍚堢悊锛屼絾鏄殢鐫€椤圭洰浠ｇ爜鐨勫鍔狅紝鎴戜滑寰堥毦纭畾杩欎簺浼樺寲搴旇鏀惧湪鍝噷銆傚嵆浣垮姞浜唌emoization锛屼篃缁忓父浼氬洜涓轰笉绋冲畾鐨勪緷璧栧€艰€屽け鏁堬紝鑰屼笖鐢变簬Hooks娌℃湁鏄惧紡鐨勫彲浠ュ垎鏋愮殑渚濊禆鏍戯紝鎵€浠ユ病鏈夊姙娉曚娇鐢ㄥ伐鍏锋潵鏌ユ壘鍘熷洜銆傚彟涓€绉嶆柟妗堟槸鏀惧湪Context涓婏紝瀛愮粍浠朵綔涓烘秷璐硅€咃紝閫氳繃useContext鑾峰彇闇€瑕佺殑鐘舵€併€備絾鏈変竴涓棶棰樸€傚彧鑳芥洿鏂颁紶閫掔粰Provider鐨勫€硷紝鑰屼笖鍙兘鏁翠綋鏇存柊锛屾棤娉曞疄鐜扮粏绮掑害鐨勬洿鏂般€備负浜嗗簲瀵硅繖涓棶棰橈紝鍙兘灏咰ontext鎷嗗垎锛岃€屼笟鍔￠€昏緫蹇呯劧浼氫緷璧栧涓狢ontext锛屾墍浠ュ氨浼氬嚭鐜癈ontext宓屽濂楀▋鐨勭幇璞°€?.2閫氬線鏈潵鐨凷ignals鐪嬪埌杩欓噷浣犱竴瀹氳寰楀緢鐪肩啛锛屾病閿欙紝閫氬線鏈潵鐨勮В鍐虫柟妗堜竴瀹氭槸鎴戔€斺€擱ecoil锛屼笉瀵癸紝杩欐鐨勪富瑙掓槸Signals銆俿ignal鐨勬牳蹇冩槸涓€涓璞★紝閫氳繃value灞炴€ф潵淇濆瓨鍊笺€傚畠鏈変竴涓噸瑕佺殑鐗规€э紝鍗充俊鍙峰璞＄殑鍊煎彲浠ユ敼鍙橈紝浣嗕俊鍙锋湰韬缁堜繚鎸佷笉鍙樸€俰mport{signal}from"@preact/signals";constcount=signal(0);//閫氳繃璁块棶.value:console.log(count.value)璇诲彇淇″彿鍊硷紱//0//鏇存柊淇″彿鍊硷細count.value+=1;//淇″彿鍊煎凡鏇存敼锛歝onsole.log(count.value);//1鍦≒react涓紝signal浣滀负props鎴栬€卌ontext鍚戜笅浼犻€掓椂锛屾槸瀵箂ignal鐨勫紩鐢ㄣ€傝繖鍏佽鍦ㄤ笉閲嶆柊娓叉煋缁勪欢鐨勬儏鍐典笅鏇存柊淇″彿锛屽洜涓虹粍浠朵紶閫掔殑鏄俊鍙峰璞¤€屼笉鏄畠鐨勫€笺€傝繖浣挎垜浠兘澶熻烦杩囨墍鏈夋槀璐电殑娓叉煋宸ヤ綔锛屽苟绔嬪嵆璺宠浆鍒拌闂畇ignal.value灞炴€х殑浠讳綍缁勪欢銆備笅闈㈡槸VDOM鍜孲ignals鍦–hrome涓洿鏂版椂鐨勭伀鐒板浘瀵规瘮锛屽彲浠ュ彂鐜癝ignals闈炲父蹇€備俊鍙峰憟鐜版瘮缁勪欢鏍戞洿鏂版洿蹇紝鍥犱负鏇存柊鐘舵€佸浘鎵€闇€鐨勫伐浣滆灏戝緱澶氥€備俊鍙疯繕鏈夌浜屼釜閲嶈鐗瑰緛锛屽嵆瀹冧滑浼氳窡韪綍鏃惰闂畠浠殑鍊间互鍙婁綍鏃舵洿鏂板畠浠€傚湪Preact涓紝褰搒ignal鐨勫€煎彂鐢熷彉鍖栨椂锛屼粠缁勪欢鍐呴儴璁块棶signal鐨勫睘鎬у皢鑷姩閲嶆柊娓叉煋缁勪欢銆?.3涓句釜渚嬪瓙鎴戜滑鍙互閫氳繃涓€涓緥瀛愭潵鐞嗚ВSignals鐨勭嫭鐗规€э細import{signal}from"@preact/signals";甯搁噺璁℃暟=淇″彿锛?锛夛紱constApp=()=>{return(count.value++;}>+{console.log("++")}{count});};褰撴垜浠偣鍑?0涓姞鍙峰悗锛岃鏁颁細浠?鍙樹负10锛岄偅涔堚€?+鈥濅細鎵撳嵃10娆″悧锛熶粠鎴戜滑骞虫椂鍐橰eact缁勪欢鐨勭粡楠屾潵鐪嬶紝鑲畾浼氭墦鍗?0娆★紝浣嗗湪Signals涓嵈涓嶆槸杩欐牱銆備粠杩欎釜Gif鍙互鐪嬪嚭锛屸€?+鈥濇病鏈夋墦鍗颁竴娆★紝杩欐槸Signals鐗规湁鐨勶紝鏁翠釜缁勪欢娌℃湁閲嶆柊娓叉煋銆備笉浠卙1娌℃湁閲嶆柊娓叉煋锛屽氨杩瀞pan鑺傜偣涔熸病鏈夐噸鏂版覆鏌擄紝鍞竴鏇存柊鐨勫氨鏄瘂count}涓枃鏈妭鐐广€傪煉℃彁绀猴細淇″彿鍙細鍦ㄨ缃柊鍊兼椂鏇存柊銆傚鏋滆缃€兼病鏈夋敼鍙橈紝鍒欎笉浼氳Е鍙戞洿鏂般€傞櫎浜嗘枃鏈妭鐐癸紝Signals杩樺彲浠ュDOM灞炴€ц繘琛岀粏绮掑害鏇存柊銆傜偣鍑诲姞鍙锋椂锛屽彧浼氭洿鏂癲ata-id锛岃繛span閲岄潰鐨剅andom閮戒笉鎵ц銆傚父閲忚鏁?淇″彿锛?锛夛紱constApp=()=>{return(count.value++;}>+{console.log("++");}{Math.random()});};3.瀹夎Signals鍙互閫氳繃灏咢preact/signals鍖呮坊鍔犲埌椤圭洰涓潵瀹夎锛歯pminstall@preact/signals4銆傜敤娉曟帴涓嬫潵鎴戜滑灏嗙紪鍐欎竴涓猅odoListDemo鏉ュ涔燬ignals銆?.1瑕佸垱寤虹姸鎬侊紝棣栧厛闇€瑕佷竴涓寘鍚緟鍔炰簨椤瑰垪琛ㄧ殑淇″彿锛屽彲浠ョ敤鏁扮粍琛ㄧず锛歩mport{signal}from"@preact/signals";consttodos=signal([{text:"Buygroceries"},{text:"閬涚嫍"},]);鎺ヤ笅鏉ラ渶瑕佸厑璁哥敤鎴风紪杈戣緭鍏ユ锛屾柊寤篢odo椤癸紝鎵€浠ラ渶瑕佷负杈撳叆鐨勫€煎垱寤轰竴涓猻ignal锛岀劧鍚庣洿鎺ヨ缃?value鏉ュ疄鐜颁慨鏀广€?/绋嶅悗鎴戜滑灏嗕娇鐢ㄥ畠浣滀负鎴戜滑鐨勮緭鍏onsttext=signal("");functionaddTodo(){todos.value=[...todos.value,{text:text.value}];text.value="";//娣诲姞鏃舵竻闄よ緭鍏ュ€紏鎴戜滑瑕佹坊鍔犵殑鏈€鍚庝竴涓姛鑳芥槸浠庡垪琛ㄤ腑鍒犻櫎寰呭姙浜嬮」銆備负姝わ紝鎴戜滑灏嗘坊鍔犱竴涓嚱鏁帮紝浠庡緟鍔炰簨椤规暟缁勪腑鍒犻櫎缁欏畾鐨勫緟鍔炰簨椤癸細functionremoveTodo(todo){todos.value=todos.value.filter(t=>t!==todo);}4.2鏋勫缓鐢ㄦ埛鐣岄潰鐜板湪鎴戜滑宸茬粡鍒涘缓浜嗘墍鏈夌姸鎬侊紝鎴戜滑闇€瑕佺紪鍐欎娇鐢≒react鐨勭敤鎴风晫闈€傚嚱鏁癟odoList(){constonInput=event=>(text.value=event.target.value);return(<>Add

{todos.value.map(todo=>(
• {todo.text}{''}removeTodo(todo)}>鉂?/button>
))}

);}鍦ㄨ繖閲岋紝涓€涓畬鏁寸殑TodoList宸茬粡瀹屾垚锛屼綘鍙互鍦ㄨ繖閲屼綋楠屽畬鏁寸殑鍔熻兘銆?.3娲剧敓鐘舵€乀odoList涓湁涓€涓父瑙佺殑鍦烘櫙锛屽氨鏄樉绀哄畬鎴愰」鐨勬暟閲忋€傚浣曡璁＄姸鎬侊紵鐩镐俊浣犵殑绗竴鍙嶅簲涓€瀹氭槸Mobx鎴栬€匳ue鐨勬淳鐢熸€侊紝Signals涓伆濂戒篃鏈夈€備粠鈥淍preact/signals鈥濆鍏淇″彿锛岃绠梷锛沜onsttodos=signal([{text:"Buygroceries",completed:true},{text:"閬涚嫍",completed:false},]);//鏍规嵁鍏朵粬淇″彿鍒涘缓娲剧敓淇″彿constcompleted=computed(()=>{//褰搕odos鏀瑰彉鏃讹紝浼氳嚜鍔ㄩ噸鏂拌绠梤eturntodos.value.filter(todo=>todo.completed).length;});瀹夋叞銆傛棩蹇楋紙瀹屾垚銆傚€硷級锛?/14.4绠＄悊鍏ㄥ眬鐘舵€佸埌鐩墠涓烘锛屾垜浠凡缁忓湪缁勪欢鏍戜箣澶栧垱寤轰簡淇″彿锛岃繖瀵逛簬灏忓瀷搴旂敤绋嬪簭鏉ヨ杩樺ソ锛屼絾鏄浜庡ぇ鍨嬪鏉傜殑搴旂敤绋嬪簭锛屾祴璇曚細鏇村姞鍥伴毦銆傚洜姝わ紝鎴戜滑鍙互灏嗕俊鍙锋彁鍗囧埌鏈€澶栧眰缁勪欢锛岄€氳繃Context浼犻€掋€俰mport{createContext}from"preact";import{useContext}from"preact/hooks";//鍒涘缓App鐘舵€乫unctioncreateAppState(){consttodos=signal([]);constcompleted=computed(()=>{returntodos.value.filter(todo=>todo.completed).length});return{todos,completed}}constAppState=createContext();//灏咰ontext浼犵粰瀛愮粍浠秗ender();//浣跨敤鍑芥暟App(){conststate=useContext(AppState);杩斿洖

{state.completed}

;}4.5绠＄悊鏈湴鐘舵€侀櫎浜嗙洿鎺ラ€氳繃淇″彿鍒涘缓鐘舵€侊紝鎴戜滑杩樺彲浠ヤ娇鐢ㄦ彁渚涚殑閽╁瓙鏉ュ垱寤虹粍浠跺唴閮ㄧ姸鎬併€俰mport{useSignal,useComputed}from"@preact/signals";functionCounter(){constcount=useSignal(0);constdouble=useComputed(()=>count.value*2);return(

{count}x2={double}

count.value++}>clickme

);}瀹炵幇useSignal鐨勬槸鍩轰簬signal鐨勶紝鍘熺悊姣旇緝绠€鍗曪紝浣跨敤useMemo鏉ョ紦瀛榮ignal锛岄伩鍏嶆洿鏂版椂閲嶆柊鍒涘缓涓€涓柊鐨剆ignal銆俧unctionuseSignal(value){returnuseMemo(()=>signal(value),[]);}4.6璁㈤槄鍙樺寲浠庡墠闈㈢殑渚嬪瓙鎴戜滑鍙互娉ㄦ剰鍒帮紝鍦ㄧ粍浠跺閮ㄨ闂俊鍙锋椂锛岀洿鎺ヨ鍙栧€硷紝骞朵笉娑夊強鍝嶅簲鍊肩殑鍙樺寲銆侻obx鎻愪緵autoRun璁㈤槄鍊肩殑鍙樺寲锛宻ignal鎻愪緵effect鏂规硶璁㈤槄銆俥ffect鎺ユ敹涓€涓洖璋冨嚱鏁颁綔涓哄弬鏁帮紝褰撳洖璋冨嚱鏁颁腑渚濊禆鐨勪俊鍙峰€煎彂鐢熷彉鍖栨椂锛屽洖璋冨嚱鏁颁篃浼氶噸鏂版墽琛宨mport{signal,computed,effect}from"@preact/signals-core";constname=signal("Jane");constsurname=signal("Doe");constfullName=computed(()=>`${name.value}${surname.value}`);//姣忔namechanges鎵撳嵃鍑篹ffect(()=>console.log(fullName.value));//print:"JaneDoe"//鏇存柊name鐨勫€糿ame.value="John";//瑙﹀彂鑷姩鎵撳嵃:"JohnDoe"effect鎵ц鍚庤繑鍥炰竴涓柊鐨勫嚱鏁扮敤浜庡彇娑堣闃呫€俢onstname=signal("绠€");甯搁噺濮撴皬=淇″彿锛堚€滄瘝楣库€濓級锛沜onstfullName=computed(()=>name.value+""+surname.value);constdispose=effect(()=>console.log(fullName.value));//鍙栨秷璁㈤槄dispose();//鏇存柊name浼氳Е鍙慺ullName鐨勬洿鏂帮紝浣嗕笉浼氳Е鍙慹ffect鍥炶皟鎵цname.value=鈥滅害缈扳€濓紱鍦ㄦ瀬灏戞暟鎯呭喌涓嬶紝鎮ㄥ彲鑳介渶瑕佹洿鏂癳ffect(fn)鍐呴儴鐨勪俊鍙凤紝浣嗘偍涓嶆兂鍦ㄤ俊鍙锋洿鏂版椂閲嶆柊杩愯锛屽洜姝ゆ偍鍙互浣跨敤.peek()鏉ヨ幏鍙栦俊鍙疯€屾棤闇€璁㈤槄銆俢onstdelta=淇″彿锛?锛夛紱甯搁噺璁℃暟=淇″彿锛?锛夛紱effect(()=>{//鏇存柊璁℃暟浣嗕笉璁㈤槄鏇存敼count.value=count.peek()+delta.value;});delta.value=1;//涓嶄細瑙﹀彂effect鍥炶皟鍑芥暟閲嶆柊鎵цcount.value=10;4.7鎵归噺鏇存柊鏈夋椂鍊欐垜浠彲鑳戒細鍚屾椂鏈夊涓洿鏂帮紝浣嗘槸鎴戜滑涓嶆兂瑙﹀彂澶氫釜鏇存柊锛屾墍浠ラ渶瑕佸儚React鐨剆etState鍚堝苟鏇存柊銆係ignals鎻愪緵浜嗕竴绉嶆壒澶勭悊鏂规硶锛屽彲浠ヨ鎴戜滑鎵归噺鏇存柊淇″彿銆備互鎴戜滑鍒涘缓todo椤瑰拰娓呯┖杈撳叆妗嗕负渚嬶細effect(()=>console.log(todos.length,text.value););functionaddTodo(){batch(()=>{//閲岄潰effect鍙細鎵ц涓€娆odos.value=[...todos.value,{text:text.value}];text.value="";});}5.鎬荤粨Signals鏄疨react鐨勪竴涓柊鐗规€э紝鐩墠Unstable锛屼笉鎺ㄨ崘鍦ㄧ敓浜х幆澧冧娇鐢紝濡傛灉鎯冲皾璇曪紝鍙互鑰冭檻鍦ㄥ皬椤圭洰涓娇鐢ㄣ€備笅涓€绡囨枃绔犲皢浠嬬粛Signals鐨勫疄鐜板師鐞嗭紝涔熶細甯﹂澶у浠庨浂寮€濮嬪疄鐜颁竴涓猄ignals銆傛帹鑽愰槄璇籌ntroducingSignalsSignalsuseSolid鍚勭娴佹淳React鐘舵€佺鐞嗘瘮杈冨強鍘熺悊瀹炵幇