react自用小技巧（持续更新中）
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};
}