ReactJS 设计模式 ~状态共置~

Source: Dev.to

状态共置概述

状态共置是将状态尽可能靠近其使用位置放置。这种模式降低了复杂度，使组件更易于理解。

之前

App 组件

function App() {
  const [isVisible, setIsVisible] = useState(false);
  return (
    
      
    
  );
}

ToggleSection 组件

function ToggleSection({ isVisible, setIsVisible }) {
  return (
    
       setIsVisible(!isVisible)}>
        {isVisible ? "Hide" : "Show"} Content
      
      {isVisible && (
        
          
This content can be toggled!

        
      )}
    
  );
}

之后

App 组件（已移除状态）

function App() {
  // Removed the isVisible state.
  return (
    
      
    
  );
}

ToggleSection 组件（状态已共置）

function ToggleSection() {
  // Placed the isVisible state here.
  const [isVisible, setIsVisible] = useState(false);
  return (
    
       setIsVisible(!isVisible)}>
        {isVisible ? "Hide" : "Show"} Content
      
      {isVisible && (
        
          
This content can be toggled!

        
      )}
    
  );
}