코드를 더욱 아름답게 만들기 위해 React 컴포넌트를 합리적으로 디자인해보세요! !

반응의 목적은 프런트 엔드 페이지를 구성 요소화하고 상태 기계 사고 모델을 사용하여 구성 요소를 제어하는 ​​것입니다. 구성 요소 간에는 확실히 관계가 있습니다. 합리적인 구성 요소 설계와 각 구성 요소에 대한 적절한 경계를 지정하면 페이지를 재구성할 때 다른 구성 요소에 미치는 영향을 효과적으로 줄일 수 있습니다. 동시에 코드를 더욱 아름답게 만들 수도 있습니다.

1. 결합도는 높고 응집력은 낮습니다.

높은 결합도: index.js를 외부에 노출하기 위해 밀접하게 관련된 기능 부분을 컨테이너 구성 요소에 넣습니다. 디렉토리 구조는 다음과 같습니다.

├── components
│   └── App
└── index.js

낮은 응집도: 호출 페이지에서 이 구성 요소가 직접 삭제되면 없음 ; 불필요한 반복 렌더링을 줄입니다. 반복 렌더링 시 영향 범위를 줄입니다.

2. 디스플레이 구성 요소 및 컨테이너 구성 요소

디스플레이 구성 요소	컨테이너 구성 요소
사물 표시에 중점을 두세요	사물이 작동하는 방식에 중점을 두세요
디스플레이 및 컨테이너 구성 요소가 포함될 수 있습니다. 일반적으로 프레젠테이션 및 컨테이너 구성 요소를 포함할 수 있는 DOM 태그 및 CSS 스타일	이 있으며 DOM 태그 및 CSS 스타일
은 종종 this.props.children	을 통해 전달되어 데이터를 제공할 수 없습니다.
store 또는 flux 액션과 같은 제3자에 대한 의존성이 없습니다.	flux 액션을 호출하고 해당 콜백을 디스플레이 컴포넌트에 제공합니다.
데이터가 어떻게 표시되는지 지정하지 마세요. 로드되고 변경됨	데이터 소스로서 일반적으로 React Redux의 connect(), Relay의 createContainer(), Flux Utils의 Container.create()
와 같이 직접 작성하는 대신 상위 수준 구성 요소는 자체 상태를 거의 갖지 않습니다. , 그렇다고 해도 그것은 그들만의 UI 상태입니다

여기서 초점은 this.props.children입니다. this.props.children을 통해 구성 요소를 낮은 응집력으로 쉽게 만들 수 있습니다. 실제 개발 과정에서 우리는 순수 컴포넌트로 작성된 디스플레이 컴포넌트와 계속해서 데이터를 다루는 컨테이너 컴포넌트를 자주 접하게 됩니다. 여기서는 this.props.children을 사용하여 이러한 컨테이너 구성 요소를 덮습니다. 그런 다음 트랩된 컨테이너 구성 요소는 위의 규칙에 따라 계속해서 새 폴더를 만들고 index.js를 노출할 수 있습니다.
이 작성 방식의 가장 큰 장점은 작성한 구성 요소가 어디에 있는지, 어떤 역할을 하는지, 어떤 영향을 미치는지 빠르게 찾을 수 있다는 것입니다.

3. 위에서 아래로의 단방향 데이터 흐름

위 조건을 충족하도록 설계해야 할 때 위에서 아래로의 단방향 데이터 흐름을 사용하면 redux와 유사한 상태 관리 도구를 사용할 수 있습니다. 시간이 지나면 영향 범위를 더 쉽게 제어할 수 있으며 불필요한 렌더링을 줄이기 위해 shouldComponentUpdate를 사용합니다. (그러나 이런 식으로 작성하는 것은 정말 번거로운 일이지만, React는 v16.3부터 새로운 생명주기 함수 getDerivedStateFromProps를 사용하여 개발자가 이 단계를 최적화하도록 합니다.)

4. 제어되는 구성 요소와 제어되지 않는 구성 요소

많은 웹 구성 요소가 있습니다. , 와 같은 사용자 상호작용에 의해 변경됩니다. 이러한 구성 요소는 일부 콘텐츠를 입력하거나 요소의 값 속성을 설정하여 구성 요소의 값을 변경할 수 있습니다. 그러나 React는 단방향 데이터 흐름에 묶여 있기 때문에 이러한 구성 요소는 제어할 수 없게 될 수 있습니다.
1. 자체 상태로 값을 유지하는 구성 요소는 외부에서 수정할 수 없습니다.
2. < ;Input> 값을 설정하는 데 사용되는 구성요소는 외부 제어를 통해서만 업데이트할 수 있습니다.

제어되는 구성요소:

제어되는 에는 값 속성이 있어야 합니다. 제어되는 구성요소를 렌더링하면 값 속성의 값이 표시됩니다.
제어되는 구성 요소는 자체 내부 상태를 유지하지 않으며 구성 요소의 렌더링은 순전히 props에 따라 달라집니다. 즉, props를 통해 값을 설정하는 컴포넌트가 있으면 어떻게 입력하든 props.value만 표시됩니다. 즉, 구성 요소가 읽기 전용입니다.
제어되는 구성 요소를 다룰 때는 항상 값 속성을 전달하고 onChange 콜백 함수를 등록하여 구성 요소를 변수로 만들어야 합니다.

제어되지 않는 구성 요소:

값 속성이 없는 은 제어되지 않는 구성 요소입니다. 렌더링된 요소를 통해 모든 사용자 입력이 즉시 반영됩니다. Uncontrolled 은 OnChange 함수를 통해 사용자가 입력한 변경 사항만 상위 계층에 알릴 수 있습니다.
#### 하이브리드 컴포넌트:
props.value와 state.value의 값을 동시에 유지합니다. props.value는 표시 우선순위가 더 높으며, state.value는 구성 요소의 실제 값을 나타냅니다.

5. 고차 컴포넌트(HOC) 사용

간단한 정의: 반응 컴포넌트를 매개변수로 받고 다른 컴포넌트를 반환하는 함수입니다.
할 수 있는 것: 코드 재사용, 코드 모듈화, props 추가, 삭제, 수정
사용 사례: 예를 들어 회사에서 갑자기 프런트 엔드 코드에 다른 클릭 지점을 묻고 싶을 경우 hoc를 사용하여 하나를 패키징할 수 있습니다. 레이어. 원본 코드를 변경하지 않고 모든 코드를 동시에 수행해야 합니다.

6. 추가, 삭제, 수정 및 확인을 위한 표준 프로세스

추가: 데이터 입력, 데이터 확인, 데이터 삽입 및 데이터 목록 다시 쿼리.
삭제: 삭제를 확인하고 데이터 목록을 다시 쿼리합니다.
확인: 데이터 목록 조회, 페이징에 표시
변경: 데이터 입력, 데이터 확인, 데이터 수정, 데이터 목록 다시 조회

사실 컴포넌트를 설계할 때 성급하게 컴포넌트화할 필요는 없습니다. 먼저 신속하게 버전을 작성한 후 실제 설계에 따라 분할하여 프로젝트 초기 단계의 요구 사항의 급격한 변화에 대처할 수 있습니다. 그런 다음 디자인 패턴에 따라 프로젝트를 조금씩 변경합니다. 디자인 패턴이 합리적으로 분할되는 한 실제로는 매우 부드럽고 자연스러운 것입니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 코드를 더욱 아름답게 만들기 위해 React 컴포넌트를 합리적으로 디자인해보세요! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!