Blazor를 사용한 소프트웨어 설문 조사 - 섹션 3 - 구성 요소

나는 Blazor로 작은 조사 사이트를 쓰기로 결정했다.이 부분은 Blazor를 배우는 핑계다.
Blazor에 대한 이해에 따라, 나는 일련의 문장 형식으로 블로그를 발표할 것이다.
이 시리즈는 Blazor를 위한 교육 과정이 아니라 이 제품을 사용할 때의 사고 과정을 배우고 있습니다.
이 시리즈의 초기 기사:

Part 1 - State

Part 2 - Better State

Blazor는 대부분 구성 요소를 기반으로 합니다.이것은 내가 매우 기쁘게 본 일이다.
React에 많은 시간을 들였는데, 나는 그것의 구성 요소 구조를 매우 좋아한다.ASP 기반 MVC 구조Net은 익숙하지만, React와 합작한 이래로 항상 좀 무거운 것 같다.
따라서 블라조르가 React & Vue 등 자바스크립트 프레임워크를 어느 정도 참고한 것은 좋은 일이다.
우리는 아직 CSS 구성 요소의 격리를 기다릴 시간이 조금 남았지만, 곧 도착할 것 같다. .Net 5발표되면 다시 볼게요.

토대
VisualStudio에서 구성 요소를 만드는 것은 가장 중요한 일입니다. 새로운 Razor 구성 요소를 추가하기만 하면 됩니다.
이것은 우리의 예시 구성 요소를 만들었다.

테스트면도칼

<h3>Test</h3>

@code {

}

그리고 우리는 추가<Test />를 통해 이 구성 요소를 다른 Razor 구성 요소나 페이지로 끌어올릴 수 있습니다.
주의해야 할 점은 구성 요소 이름 공간이 폴더를 만드는 데 기반을 두고 있다는 것이다.프로그램 가져오기에 이 이름 공간을 포함한다는 것을 기억하십시오.면도칼 줄.

비밀 번호
가격 인하는 쉬우나 면도기 서류에 들어갈 뿐이다.코드를 어디에 두느냐가 앞으로 몇 년 동안 팀에서 논쟁을 불러일으킬 것이라고 나는 의심한다.
너는 기본적으로 세 가지 선택이 있다.

테스트 중입니다.@code { } 블록

의 razor 파일

테스트 중입니다.면도칼.cs 파일을 부분 클래스로

테스트 라이브러리에 있습니다.cs "base"클래스 (확장 ComponentBase), 그리고 테스트 중 @inherits TestBase.면도기

나는 어떤 버전을 사용하는 것이 개인의 취향인지 의심스럽지만, 나는 개인적으로 한 버전을 선택하고 혼동을 피하기 위해 가능한 한 견지해 나가는 것을 건의한다.
나는 개인적으로 라조 파일에서 @code { } 블록을 사용하는 것을 좋아한다.이것은 코드와 태그를 한 곳에 저장하고 보기 쉽다. 마치 내가 React에 있는 것과 같다.
코드가 너무 많으면 @code { } 블록이 좀 무거워질 수 있지만, 이것은 구성 요소에서 너무 많은 작업을 했음을 나타낼 수 있습니다.
나에게 있어서 @code { } 블록은 매우 간단해야 하며 어떠한 논리도 삽입할 수 있다.

구성이 상속보다 무겁다
초기 버전의 소프트웨어 조사에서 나는'기본'기술에 심각하게 의존했다.나는 그것으로 조사 페이지에 기능을 내장했다.
너는 this commit version에서 이 점을 볼 수 있다.모든 페이지에는 두 개의 기본 클래스가 사용됩니다.

SoftwareSurvey/Components/SurveyPageBase.cs

SoftwareSurvey/Components/SurveyFormBase.cs

이 두 기류는 모든 조사 페이지에 일정한 수준의 기능을 제공했다. 기술적으로는 가능하지만, '냄새' 가 정확하지는 않을 것이다.
그래서 나는 기능을 기본 클래스에서 구성 요소로 재구성할 것이다.그리고 이 구성 요소들을 한데 조합해서 코드를 더욱 쉽게 이해할 수 있도록 한다.
가능하면 상속이 아닌 구성 요소 조합을 항상 지원합니다.

아동 내용
Blazor는 React와 마찬가지로 서브객체를 어셈블리로 전달할 수 있습니다.
이 예는 <EnsureBeenThroughStart /> 어셈블리에서 사용됩니다.

시작할 때 안전을 확보하다.면도칼

@if (_valid)
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private bool _valid;

    ...
}

이 구성 요소는 사용자가 조사의 시작점에 접근했는지 확인하는 데 사용됩니다. (없으면 시작점으로 다시 지정합니다.)그것은 응답자들이 조사 과정에서 의외로 심도 있는 링크를 피해야 한다.
유효한 경우 구성 요소가 @ChildContent 표시됩니다.Blazor는 @ChildContent 표기 사이에 정의된 모든 것을 자동으로 제공합니다.
아래에서 보다시피 나는 모든 공유기를 안에 쌌다.

응용 프로그램.면도칼

...

<PreRenderLoadingMessage>
    <EnsureBeenThroughStart>
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                    @{ Is404 = true; }
                </LayoutView>
            </NotFound>
        </Router>
     </EnsureBeenThroughStart>
</PreRenderLoadingMessage>

...

더 배울 게 많아요.
구성 요소는 간단한 개념인 것 같지만, 많은 간단한 일들처럼, 나는 그것들이 경험을 해야만 그 중에서 가장 좋은 효과를 얻을 수 있다고 생각한다.
재구성 과정에서 나는'기류'에서 이 점을 알게 되었다.
나는 그들이 React에서 한 것처럼 시간 초과 (사용) 사용 패턴이 나타날 것이라고 의심한다.나는 Blazor와 Javascript 프레임워크 사이에 많은 생각이 교차하여 전파될 것이라고 의심한다.
만약 당신이 아직 이렇게 하지 않았다면, 나는 당신이 읽는 것을 건의합니다 Microsoft Create and use ASP.NET Core Razor components page