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
};
}