TIL 202111118[第9964便]

5642 ワード
航海 テキストリンク
悩ましい問題.背面カードのマウスボタンを離すとレンダリングされます

  • 問題の原因
    ポストカードマウスが通過すると、アイコンを修正、削除した部分がステータス変更され、レンダリングされます.

  • ソリューション
    • //Before 코드(오류가 있던 코드)

const [display, setDisplay] = React.useState({ display: 'none' });

...생략...

  <Div
    onMouseEnter={() => {
    setDisplay({ display: 'block' });
    }}
    onMouseLeave={() => {
    setDisplay({ display: 'none' });
    }}
   >
    <ProjectDiv>
      <Grid is_flex>
       <TitleText>{cardList[cardId].title}</TitleText>
        <IconDiv >
          <EditBtn style={display} onClick={editCardBack} />
          <DeleteBtn style={display} onClick={deleteCardBack} />
        </IconDiv>
        
       ...생략...
       
 const IconDiv = styled.div`
   display: flex;
  justify-content: space-around;
  margin-right: 48px;
`;
        
    //After 코드(오류 수정 코드)
...생략...

  <IconDiv className="iconDiv">
    <EditBtn onClick={editCardBack} cursor="pointer" width="38%" />
    <DeleteBtn
     onClick={deleteCardBack}
     cursor="pointer"
     width="38%"
    />
 </IconDiv>
 
 ...생략...

const ProjectDiv = styled.div`
  width: 1110px;
  height: 450px;
  border-radius: 16px;
  border: 1px solid ${'#4d4759' + Opacity[50]};
  background-color: ${ColorStyle.BackGround100};
  margin: 0px auto 40px auto;
  // css hover로 display 관리 
  &:hover {
    border: 1px solid ${ColorStyle.PrimaryPurple};
    background: ${'#a09bac' + Opacity[15]};

    .iconDiv {
      display: flex;
    }
  }
`;

const IconDiv = styled.div`
  display: none;
  justify-content: space-around;
  margin-right: 48px;
`;

    変更する前に、onMouse()メソッドを使用して、表示変更をstateに管理します.レンダリングはstateが変更されたときにも発生します.この部分はCSS hoverで置き換えることができるので、不要なレンダリングが発生していると考えられます.したがって、レンダリングの問題を解決するためにdisplayをサスペンションで変更します.上の図から、レンダリングが発生すると白い線が表示されますが、何の反応もなくアイコンが表示され、不要なレンダリングの問題が解決されます.
    P.S.レンダリング条件
    1.ステータス変更時
    2.新しい道具があるとき
    3.親構成部品をレンダリングする場合
    4.forceUpdate実行時
    実戦アイテムなので、性能の問題も気になるので、不要なレンダリングを減らすためにコードを修正する必要があります.がんばってください.😊
    704. Binary Search
    BuildConfig