적으면 많다.애플리케이션 성능을 향상시키기 위한 React 코드 단순화 - 섹션 1

React개발에 대해 말하자면 개발자로서 우리가 자주 잊어버리는 주문, 영원히 잊지 말아야 할 주문이 있다.'적으면 많다'.그것은 표현일 뿐만 아니라 사고방식이며 문제를 해결하는 방식이므로 당신의 디자인에 영향을 미쳐야 한다.KISS는 60여 년 동안 존재해 왔는데, 오늘날도 여전히 반세기 전과 마찬가지로 선견지명이 있다.
개발자로서 우리는 과도한 설계와 과도한 개발을 피해야 한다. 적은 자원이 있어야만 같은 결과를 실현할 수 있을 때 우리는 너무 많이 해야 한다.이것은 구성 요소를 더욱 작은 구성 요소로 재구성하고 구성 요소의 입력/출력의 복잡성을 낮추며 과도한 처리와 복잡한 알고리즘의 조합을 피할 수 있다.
우리의 목표는 모든 것을 가능한 한 간단하게 하는 것이지, 그것을 더욱 간단하게 하는 것이 아니다.즉, 과부하를 인지하지 않은 상태에서 가능한 한 효율적으로 일하고, 우리가 하는 일을 가능한 한 간단한 수준으로 줄이지 않으면 통상적으로 더 많은 일을 창조할 수 있다는 것이다.이것은 새 프로그래머에게만 한정된 문제가 아니다.하나의 목표를 실현하기 위해서 우리는 모두 더욱 짧은 길을 걸었다.때때로 우리는 다른 선택이 없다. 때때로 우리가 이렇게 하는 것은 우리가 더 좋은 방법을 모를 수도 있고, 다른 때는 우리가 정확한 일에 시간을 쓰고 싶지 않기 때문이다.
'적으면 많다'는 것은 다양한 경험을 가진 개발자가 참여할 수 있을 뿐만 아니라 참여해야 한다.이것은 응용 프로그램 개발을 개선하고, 사용하는 응용 프로그램을 개선하며, 더욱 효과적으로 작업할 수 있도록 도와줄 것입니다.개발자의 최종 목표를 평가하는 것은 코드 줄이 되어서는 안 된다.그것은 코드 품질, 오류율, 재작업 요구에 있을 것이다.

어셈블리 단순화

우리는 기존의 부품에 대해 철저한 점검 수리를 하지 않고 여러 가지 전략을 취해 우리의 부품을 간소화할 수 있다.각 전략은 서로 다른 블로그에 소개될 것이다.

상태와 디스플레이를 분리하여 어플리케이션이 공인된 MVC 규칙과 일치하도록 도와줍니다

서비스 및 맞춤형 연결로 처리 지연

과부하 방지useEffect 및 useState

진짜 필요한지 확인redux 및 redux-saga

구성 요소 간의 기능을 연결하기 위한 고급 구성 요소 생성

계산 논리를 구성 요소에서 보조 함수로 옮기고 사용자 정의 연결

을 사용하여 주입

가능한 한 타성 로드와 타성 행위를 사용

1. 응용 프로그램이 완성된 MVC 규칙과 일치하는 상태를 디스플레이와 분리합니다.

전통적인 응용 프로그램 설계는 MVC 원칙에 따라 응용 프로그램 논리를 세 가지 다른 구성 요소로 나눈다.모델, 뷰 및 컨트롤러컨트롤러는 사용자의 진입과 종료, 그리고 사용자 이벤트를 처리한다.모델은 사용자 데이터의 변화에 응답하고 보기는 시종 모델을 반영해야 한다.

일반적인 어셈블리 구조를 단순화하는 예를 살펴보겠습니다.

const globalState = someStateTool();
const myComponent: React.FC<> = () => {
  const [ myState, setMyState ] = useState<any>({});
  const [ loaded, setLoaded ] = useState<boolean>(false);

  useEffect(() => {
    setTimeout(() => { setLoaded(true); }, 2500);
    setTimeout(() => { globalState.set("foo", "bar")}, 5000);
  }, [])

  return loaded ? (<MySubComponent/>) : (<SpinnerComponent/>);
}

const mySubComponent: React.FC = () => {
  const [ someState, setSomeState ] = useState<any>(null);
  globalState.subscribeTo("someEvent", ev => setSomeState(ev.data));
  const handleClick = () => globalState.set("foo", "bar");

  return (
    <div>
      <button onClick={handleClick}>Some title</button>
    </div>
    <div>{someState.foo}</div>
  )
}

모든 구성 요소는 이 구성 요소에 특정한 독립된 기능을 포함한다.따라서 순수하지는 않지만 독립적이고 교환이 가능하다.이러한 유형의 구성 요소는 고유하게 각종 사용자 입력 행위와 데이터 구동 이벤트에 응답한다.부모 구성 요소가 아닌 흐름, 이벤트 구독, 기타 데이터와 이벤트 원본에 있으면 복잡성의 증가와 결합의 증가에 수반된다.
모든 구성 요소에는 대량의 테스트 작업도 관련된다. 왜냐하면 둘 다 각종 서비스와 공급자를 모의하고 행위와 상호작용을 처리해야 하기 때문이다.

// Create a contract for the sub component
type SubComponentType = { foo: string, handleClick: () => void };

const globalState = someStateTool();
const myComponent: React.FC<> = () => {
  const [ myState, setMyState ] = useState<any>({});
  const [ loaded, setLoaded ] = useState<boolean>(false);
  globalState.subscribeTo("someEvent", ev => setMyState(ev.data));
  const handleClick = () => globalState.set("foo", "bar");

  useEffect(() => {
    setTimeout(() => { setLoaded(true); }, 2500);
    setTimeout(() => { globalState.set("foo", "bar")}, 5000);
  }, [])

  return loaded ? (<MySubComponent foo={myState.foo} handleClick={handleClick}/>) : (<SpinnerComponent/>);
}

// Make sure our component adheres to the type contract
const mySubComponent: React.FC<SubComponentType> = ({ foo, handleClick }) => {
  return (
    <div>
      <button onClick={handleClick}>Some title</button>
    </div>
    <div>{foo}</div>
  )
};

우리는 심지어 변환 구성 요소를 고급 구성 요소로 분리하거나 상태를 바탕으로 서로 다른 구성 요소를 나타내는 포장 구성 요소로 분리할 수 있다.

type SubComponentType = { foo: string, handleClick: () => void };

const globalState = someStateTool();

const myComponentLoader: React.FC = () => {
  const [ loaded, setLoaded ] = useState<boolean>(false);

  useEffect(() => {
    setTimeout(() => { setLoaded(true); }, 2500);
  }, [])

  return loaded ? (<MyComponent/>) : (<SpinnerComponent/>);
}

const myComponent: React.FC<> = () => {
  const [ myState, setMyState ] = useState<any>({foo: globalState.get("foo")});
  globalState.subscribeTo("someEvent", ev => setMyState(ev.data));
  const handleClick = () => globalState.set("foo", "bar");

  return <MySubComponent foo={myState.foo} handleClick={handleClick}/>;
}

const mySubComponent: React.FC<SubComponentType> = ({ foo, handleClick }) => {
  return (
    <div>
      <button onClick={handleClick}>Some title</button>
    </div>
    <div>{foo}</div>
  )
};

동일한 구성 요소 구조를 나타내는 행 코드를 더 많이 만들었지만 다음을 수행했습니다.

모델 논리와 보기 논리를 분리

MySubComponent는 순조로 나뉜다.같은 입력을 주면 항상 같은 출력이 나와야 한다

MyComponent 효소 같은 도구로 테스트하기 쉽다. 서브어셈블리가 불러오는지 확인하기만 하면 된다

모든 로드 논리는 톱 레벨 어셈블리를 통해 처리됩니다.불러올 수 있는 구성 요소는 필요할 때 교환할 수 있습니다.

두 번째 섹션에서는 처리 지연 및 custom hooks에 대해 설명합니다.