react自用小技巧（持續更新中）
作者：devwolf
導言：
筆者應屆時，投vue2就任一家大食品廠的資訊部后轉成了react，寫了一年出頭的react類組件。然后跳槽到蘇州科技城的一個原做影視渲染的公司開始全面轉hooks，又寫了兩年多。再后來去一家智倉寫irms羲和調度，react類組件和hooks混用干了5個月。某些在筆者v2ex上公開過的原因，筆者又跳回了互聯網賽道，觀摩著如今vue崗在國內趨于主流，打算“棄暗投明”轉vue崗（也看到了vue3那些很多針對react痛點的新語法糖）。可惜，筆者的事業運一如既往的差，如今在一家給政府做房地產相關的公司里用vue2維護老項目純體力活。
不想完全落下react的相關手藝，下一跳還選react，現在重新拾起來看看官網和自己隨便搓搓東西。
目前這篇連載用于記錄筆者react開發期間遇到的一些封裝技巧/野路子。
同步記錄于筆者的github?devwolf
1.封裝一個自帶了ui組件的類自定義hooks
用react官網的例子改造一下，比較像自定義hooks，但是不完全是。閉包中提供了一個ui組件以及這個ui組件的修改方法，以此來進行外部的額外干預
import { useState } from 'react';export default function MyApp() {const {MyButtonUI:MyButtonUI1,handleClick:handleClick1} = MyButton()const {MyButtonUI:MyButtonUI2,handleClick:handleClick2} = MyButton()return (<div><h1>Counters that update separately</h1><button onClick={()=>{handleClick1()handleClick2()}}>all</button><MyButtonUI1 /><MyButtonUI2 /></div>);
}function MyButton() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}const MyButtonUI=()=>{return <button onClick={handleClick}>Clicked {count} times</button>}return {MyButtonUI,handleClick};
}
