在 React 中重构长组件的技巧？ [关闭]答案

【问题标题】：Tips for refactoring long components in React? [closed]在 React 中重构长组件的技巧？ [关闭]
【发布时间】：2021-07-24 17:34:48
【问题描述】：

想象一下有一个长组件，其中包含解决用例的方法。

在此组件的开发过程中，我们可能会考虑对其进行重构，将组件转换为带有原子（子）的分子。

所以，如果我们有这个原始组件：

function A() {
   const [myState, setMyState] = useState([]);

   const myMethod1 = () => {
       setMyState([1]);
   }

   const myMethod2 = () => {
       setMyState([2]);
   }

   ...
   
   const myMethodN = () => {
       setMyState([N]);
   }


   const otherMethod = () => {
       console.log("Hello world");
   }

   useEffect(() => {
       otherMethod();
   }, []);

   return (
     <View>
        {/* STUFF... */}
     </View>
   );
}

我们可以使用原子轻松重构：

function A() {
    function A() {
       const [myState, setMyState] = useState([]);
    
       const myMethod1 = () => {
           setMyState([1]);
       }
    
       const myMethod2 = () => {
           setMyState([2]);
       }
    
       ...
       
       const myMethodN = () => {
           setMyState([N]);
       }
    
       return (
         <View>
            {/* LESS STUFF... */}
            <B />
         </View>
       );
    }
}

function B() {
   const otherMethod = () => {
       console.log("Hello world");
   }

   useEffect(() => {
       otherMethod();
   }, []);

   return (
     <View>
        {/* LESS STUFF... */}
     </View>
   );
}

但是，有时，在某些情况下，将组件拆分成小片段是没有意义的。

所以，如果有一个内部有 50 种方法的组件，比如组件“A”的函数“myMethodN”，它具有包含其所有方法的所有世界意义，那么哪种类型的重构可以我们申请？

我曾考虑将部分代码移动到自定义挂钩，或创建“功能/逻辑”HOC，以避免包含 500 行代码的组件。但是，似乎没有必要，因为我只会将这些钩子或 HOC 与该组件一起使用（没有可重用性）。

我不知道为什么，但是在响应式编程中，当我看到一个很长的组件并且由于状态管理等原因而很难对其应用重构时，我感到非常压力。避免这种情况的拇指或良好做法？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

自定义钩子有利于在多个组件中重用它们，但我也会在此示例中使用它们，因为这样代码看起来更干净和可读，即使您将来不会再次使用钩子。我更喜欢钩子而不是 HOC，因为当您打开组件时，您会立即看到有一些自定义命名的钩子，当您使用 HOC 时，您必须滚动到组件的底部才能发现它使用 HOC。有时看不清楚，因为你看到一些不同的道具来到它，但你不知道从哪里得到它们。稍后您会看到该组件是 HOC 中的包装器，但并不那么容易找到。

【讨论】：