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