react 프로그램의 생성 속도가 느립니까?

3641 단어 reactredux
그래서 나는react와 Firebase로 typescript를 사용하는 아주 간단한 프로그램을 만들려고 했다.기본적으로 하나의 응용 프로그램으로 로그인하여 권한을 부여받은 내용을 볼 수 있습니다.
POC의 적용 상태는 간단합니다.
{
    user: { id: string, name: string },
    isAppReady: boolean
}
처음에는 백엔드에서 작성을 사용합니다.NET, 그래서 나는 그들의 CRA(create react 앱) 템플릿을 사용했지만, 나중에 나는 자바로 방향을 바꿨다.어쨌든, 매직처럼, 나는 백엔드와 통신할 수 있는 응용 프로그램이 하나 있다.예!나는 이 웹 프로젝트에 10억 개의 의존항이 있다는 것을 알아차렸지만, 나는 이 간단한 프로젝트를 위해 10억 개의 라이브러리를 이해할 필요가 없을 것이다. 나는 잠시 후에 그것들을 정리할 수 있다.

다음은 Firebase 의존항을 웹 프로젝트에 추가하고 백엔드 실례로 설정했습니다. 모든 것이 좋습니다.
그리고 로그인 단추를 만들어서 로그인하고 내비게이션 메뉴에 추가했습니다.나는 상하문 제공자를 통해 대상을 공유하고 로그인을 알릴 수 있는 방법을 알게 되었다.구애나는 곧 끝낼 것이다.
현재 저는 JS를 사용한 지 여러 해가 되었지만 불행하게도 대기업에서 몇 년 (2014년부터) 일한 후에야 ES2015 전체의 참패를 겪었습니다.그러나 내가 현실 세계로 돌아왔을 때 나는 갑자기 전단 개발의 상태를 깨달았다.
하지만 너는 알다시피 이것은 그리 대단한 것이 아니다.일이 바뀌자 나는 속도를 회복하고 다른 회사를 위해 워터 클리닉 프로그램을 개발하기 시작했다.나는 그곳에서 프레임워크를 선택하지 않았지만, 브라우저 이벤트를 기반으로 하는 반응성 모델 (사용할 수 있는 수동 연결이 있음) 을 사용했기 때문에 사용하기가 매우 간단하다.
나중에 나는 vue로 옮겨서 사용하기가 매우 간단했다.현재, vue,angular,react를 사용하기로 결정했을 때, 나는react를 취소했다. 왜냐하면 지난번에 내가react 응용 프로그램을 만들기 시작했을 때, 나는 10억 개의 의존항을 설치하여 간단한 일을 해야 했지만, 지금은 개인의 발전을 위해 다시 시도하기로 결정했다.
네, 응용 프로그램으로 돌아갑니다.나는 이것이 포효하는 것을 원하지 않지만, 다음에 무슨 일이 일어났는지 설명해 주겠다.사용자가 시작할 때null인 것을 알았습니다. firebase.auth 만들 때 완전히 초기화되지 않았기 때문입니다.그래서 Firebase가 준비된 후에 응용 프로그램의 상태를 업데이트해야 합니다.이것이 바로 모든 것이 붕괴된 곳이다.
우선, 나는 진정으로 반응 개발자가 될 때가 되었다.차갑다나는 상태 관리가 필요하기 때문에 Redux를 배워야 한다.이것은 예상한 것이다.하지만redux는react-specific가 아니기 때문에react-redux를 배워야 합니다.이것은 나로 하여금 Redux 도구 패키지를 생각하게 했다.그리고 비동기 논리를 처리하기 때문에 Thunk가 무엇인지, 그리고 Redux Thunk가 어떻게 작동하는지 배워야 합니다.그래서 지금 내 생각엔...사실대로 말하면, wtf.물론 이 구조를 포기하고 MobX나 다른 것을 사용할 수 있을지도 모르지만,react/redux는react의 표준이라고 생각합니다.어쩌면 내가 틀렸을지도 몰라.
좋아, 그래서 나는 반드시 이 모든 것을 배우고 머릿속에서 조직해야 의미가 있다. 그래야 내가 얻은 정보를 진정으로 사용할 수 있다.이렇게 간단한 임무에 대해 말하자면, 이것은 너무 복잡하다.내가 사용자의 머리를 다른 걸음으로 업데이트하는 방법을 배운 후에 나는 유형 주석과 싸웠다. 왜냐하면 나의 starter cra 템플릿(기억.NET)에서 MSFT 직원들도 라이브러리/프레임워크 간의 상호작용(즉react/react-redux/redux-thunk)을 완전히 이해하지 못했기 때문이다.그러나 코드에 버그가 있습니다. 루트를 복구하지 않고 구성 요소를 any 로 단언해서 형식 검사를 삭제합니다.
export default connect(
  (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
  WeatherForecastsStore.actionCreators // Selects which action creators are merged into the component's props
)(FetchData as any);
그들이 왜 이렇게 하는지 누가 알겠는가, 그러나 그들의 타자는 틀림없이 잘못이 있을 것이다.내가 연결을 시도했을 때, 나는 왜 컴파일 오류가 발생했는지 매우 곤혹스러웠지만, 그들이 입력한 구성 요소가 정확하지 않은 것을 발견했다.
나는 주제에서 벗어났다.그래서 나는 나의 구성 요소를 정확하게 입력했다. 이렇게 하면 나는 연결할 수 있고, 이렇게 하면 나는 안전하게 나의 조작을 스케줄링할 수 있다. 이렇게 하면 나는 나의 상태를 업데이트할 수 있고, 이렇게 하면 구성 요소가 새로 고칠 수 있다.그러나 이제는 상점과 통신하는 모든 새로운 구성 요소에 대해 이 과정을 반복해야 한다는 것을 깨달았다.주로 구성 요소 인터페이스를 업데이트합니다. 각각 ActionCreator와reducer를 만들고 연결합니다. (reducer에서 스위치/if/etc를 사용합니다.)
그래서 이것은 건조한 것이 아니라 받아들일 수 없는 것이다. 왜냐하면 나는 다른 틀에서 이렇게 할 필요가 없기 때문이다.예를 들어 모든 구성 요소는 vue에서 이 줄을 사용할 수 있다
Vue.use(Vuex);
이것은 vue를 널리 보급하기 위해서가 아니라 react로 진정으로 효율적이고 정확하게 어떤 일을 하는 시간이 내가 사용하는 다른 프레임워크보다 훨씬 길고 시간적으로 한 걸음 후퇴했다고 생각한다.기왕 내가 이런 중복을 없애기 위해 뭔가를 쓸 수 있다는 것을 알았으니, 나는 더 좋은 방법이 있다고 믿는다.그러나 문제는 할 수 없는 것이 아니라 효율적이고 정확하게 하는 시간이 더 길다는 것이다.
나는 심지어 중간부품을 내 루트와 오류 처리에 적용하기 시작하지 않았지만, 만약 내가 다른 4개의 라이브러리를 포함해야 한다면, 단지 내 루트에 접근 제어 (실제 접근 제어를 실현하기 전에) 를 추가하기 위해서, 그것은react 개발이 느리고 지루해 보이기 시작한다고 말해야 한다.
나는 다른 사람들이 어떻게 생각하는지 매우 궁금하다.

좋은 웹페이지 즐겨찾기