베테랑 운전 자로 서 React 를 사용 하여 총 결 한 11 가지 경험 과 교훈

Jolyon Russ
본문 번역:수염 이 크다
原 文:http://huziketang.com/blog/posts/detail?postId=58e83f01a58c240ae35bb8e1
영어 연결:11 lessons learned as a React contractor
전재 출처 를 밝 히 고 원문 링크 와 작성 자 정 보 를 보존 하 십시오.
처음에 React 길에서 더 듬 거 리 며 때 렸 을 때 무엇 을 찾 아야 할 지 몰 랐 지만 최근 몇 년 동안 경험 을 돌 이 켜 보 니 찾 아야 할 것 이 머 릿 속 에 있다 는 것 을 알 게 되 었 다.다음은 제 가 React 과정 을 공부 하 는 관건 적 인 부분 과 제 배경 상황 입 니 다.

저 는 18 년 동안 코드 를 썼 습 니 다.그 중에서 13 년 은 전업 전문 운전 기사 입 니 다.

그 중에서 6 년 동안 플래시 개발 에 전념 했다.

스 티 브 잡 스 의 공개 편지 가 Flash 를 지지 하지 않 는 다 고 밝 힐 때 까지

나 는 HTML,CSS 와 JS 라 는 몇 가지 기능 점 을 닦 은 적 이 있다.

주류 자 바스 크 립 트 프레임 워 크 에 대한 연구 에서 오랫동안 갈등 을 겪 었 는데 그 당시 에 그들 은 대량의 논 리 를 뒤에 숨 겼 다 고 느 꼈 다.

회 사 를 그만 두 고 아웃 소 싱 생활 을 시 작 했 는데 주로 원형 을 만 들 었 다.

React Demo 를 많이 봤 어 요.

2015 년 10 월 에 React 프로젝트 생활 을 본 격 적 으로 시 작 했 고 이 를 사랑 하 게 되 었 다.

2016 년 1 월 에 제 가 LinkedIn 에 있 는 Title:React 개발 자 를 바 꾸 었 습 니 다.

다음은 내 가 총 결 한 경험 들 이 니,너 에 게 도움 이 되 기 를 바란다.
1.여러 개의 간단 한 구성 요소 가 고도 의 맞 춤 형 구성 요소 보다 낫다.
React 구성 요소 의 행동 을 바 꾸 는 것 은 전달 하 는 props 에 의존 하 는 유용 한 기능 입 니 다.프로젝트 초기 에 좋 은 프로 그래 밍 습관 을 기 르 는 것 은 미래 에 매우 좋 습 니 다.유 니 버 설 구성 요 소 를 만들어 다른 곳 에서 도 사용 할 수 있 도록 합 니 다.
프로젝트 를 시작 한 후에 구성 요소 에 대해 서 는 이 구성 요소 의 사용 외연 을 계속 확장 할 수 있 습 니 다.시간 이 지나 면 bug 를 복원 하 는 데 지 칠 것 입 니 다.A 장면 에서 복 구 를 한 후에 장면 B 와 장면 C 에서 bug 를 발견 할 수 있 습 니 다.
제 제안:만약 하나의 조합 구성 요소 가 bug 를 가 져 왔 다 면,그것 을 몇 개의 간단 한 구성 요소 로 분해 하 십시오.코드 가 중복 되 더 라 도 가치 가 있 습 니 다.
2.라 이브 러 리 에 bug 가 있 는 것 을 발견 하면 가능 한 한 Issue 와 Pull Request 를 제시 하 세 요.
React 만 사용 하면 React 핵 이 든 1000 여 개의 사용 가능 한 NPM 모듈 이 든 오픈 소스 소프트웨어 를 사용 할 것 입 니 다.라 이브 러 리 에 bug 가 있 는 것 을 발견 하면 Issue 를 올 리 세 요.더 좋 은 경우,만약 당신 이 bug 를 수정 했다 면,반드시 Pull Request 를 제기 하여 복 구 된 코드 를 통합 시 켜 야 합 니 다.왜냐하면 이 라 이브 러 리 를 사용 하고 bug 를 만난 것 은 당신 혼자 만 이 아니 기 때 문 입 니 다.이렇게 하면 전체 생태 를 더욱 좋아 지게 할 수 있 습 니 다.
나의 건의:지역 사회 에 보답 하 세 요.문서 의 맞 춤 법 오 류 를 수정 하 더 라 도 좋 습 니 다.
3.먼저 build 과정 을 한 번 완성 한 다음 에 React 코드 를 작성 합 니 다.
나 는 이것 이 결코 흔히 볼 수 있 는 장면 이 아니 라 는 것 을 알 고 있 지만,나 는 만난 적 이 있다.내 가 아웃 소 싱 프로젝트 를 시작 하고 build 를 시 작 했 을 때,컴 파일 에 의존 하 는 가방 이 존재 하지 않 는 다 는 것 을 발견 했다.실제로 이 React 는 백 본 프로젝트 에 사용 되 는 것 으로 밝 혀 졌 다.Backbone 에서 React 구성 요 소 를 실현 하 는 것 은 매우 간단 합 니 다.Redux 를 사용 하면 이 두 사이 에서 통신 할 수 있 습 니 다.이들 간 통신 은 Browserify 나 Webpack 을 통 해 컴 파일 되 어야 합 니 다.
제 제안:기 존 프로젝트 에 React 를 적용 하면 먼저 Browserify 나 Webpack 으로 build 과정 을 한 번 걸 어 보 는 것 이 좋 습 니 다.
4.간단 한 데이터 시각 화,원생 SVG>=D3
D3 는 데이터 시각 화 에 있어 서 매우 잘 하지만 간단 한 데이터 시각 화 만 하려 면 원생 SVG 를 과장 하면 업무 수 요 를 만족 시 킬 수 있 습 니 다.
나의 건의:SVG 기 초 를 좀 배 워 라.네가 더 복잡 한 기능 을 필요 로 하기 전에 이 정도 면 충분 하 다.유 튜브채널가 며칠 전 마침 방송SVG 에 관 한 프로그램 입 니 다.되 어 볼 만하 다.
5.만약 당신 이 2 주의 프로젝트 기한 만 있다 면 기능 을 간소화 하 세 요.
만약 당신 이 하려 는 일이 단지 과장 일 뿐 이 라면,React 와 React-DOM 이면 충분 합 니 다.
Redux 의 처 리 는 큰 프로젝트 의 다 중 UI 를 처리 하 는 데 시간 과 정력 을 소모 합 니 다.하지만 프로젝트 가 간단 하 다 면 props 와 callback 을 전달 하면 됩 니 다.Redux 를 사용 할 필요 가 없습니다.
제 제안:템 플 릿 프로젝트 는 매우 유용 합 니 다.하지만 프로젝트 를 간소화 하고 싶다 면 React 와 React-DOM 부터 시작 하 는 것 이 좋 습 니 다.
6.CSS 애니메이션 에 만 의존 하여 요 소 를 이동 하 는 것 이 느 립 니 다.
나 는 너 에 게 언제 프레임 속도 가 현저히 떨 어 지 는 것 을 볼 수 있 는 지 정확하게 알려 줄 방법 이 없다.아마도 30 개의 요소 일 때,아마도 300 개의 요소 일 때 이다.하지만 당신 에 게 도움 이 되 는 경험 을 알려 줄 수 있 습 니 다.React 의 가상 DOM 을 충분히 이용 하고 필요 할 때 만 렌 더 링 과 렌 더 링 을 할 수 있 습 니 다.
보기 창 에 보 이 는 구성 요소 만 보 여 주 는 것 입 니 다.
나의 건의:저 배합 기계 에서 테스트 를 하 는 동시에 경계 데 이 터 를 테스트 하여 당신 의 프로그램 이 제 한 된 상황 에서 어떻게 행동 하 는 지 보 세 요.
7.연구 모델 은 좋 은 시작 방법 이지 만...
새 라 이브 러 리 나 새 프레임 워 크 를 배우 고 있다 면 템 플 릿 프로젝트 부터 시작 하 는 것 이 좋 습 니 다.너희 회사 에 자신의 양식 이 있 었 으 면 더 좋 았 을 텐 데.
그러나 템 플 릿 프로젝트 가 모든 문 제 를 해결 할 수 있다 고 생각 하지 마 세 요.실제 업무 에서 너 는 그것 이 실현 되 는 것 이 전혀 네가 원 하 는 것 이 아니 라 는 것 을 알 게 될 것 이다.만약 당신 이 처음부터 프로젝트 를 구축 하지 않 았 다 면,그 뒤 에는 많은 문제 가 생 겼 을 것 입 니 다.또한 템 플 릿 프로젝트 의 여러 가지 특징 에 대해 잘 모 르 면 이미 존재 하 는 기능 을 재 구성 할 수 있 습 니 다.
나의 건의:템 플 릿 프로젝트 를 그들 이 가장 잘 하 는 곳 인 빠 른 시작 프로젝트 에 사용 하 라.그것들 을 재 구성 하 는 것 을 두려워 하지 말고 당신 의 의지 에 따라 움 직 여야 합 니 다.또한 당신 이 사용 하 는 템 플 릿 프로젝트 의 특성 을 미리 알 아 보 는 것 이 좋 습 니 다.
8.구성 요소,connected 구성 요소,용기 의 제어 가능 유지
Redux 로 build 할 때 구성 요소 의 개 수 를 제한 하 는 동시에 actions/reducers 의 재 활용 성 을 확보 하 는 것 이 좋 습 니 다.
구성 요 소 는 자신의 props 에 만 의존 해 야 합 니 다.
Connected 구성 요 소 는 Redux 를 통 해 응용 데 이 터 를 방문 하고 자신의 DOM 과 하위 구성 요소 만 과장 해 야 합 니 다.
용 기 는 연주자 의 역할 을 하고 데 이 터 를 추출 하 며 구성 요 소 를 렌 더 링 합 니 다.
나의 건의:이름과 기능 의 일치 성 을 유지 하 는 것 에 주의 하 세 요.
9.엄격 한 코드 검 사 는 양날 의 검 이다.
나 는 다양한 프로젝트 를 개발 하여 각종 형식의 코드 검 사 를 겪 었 다.코드 검사 가 전혀 없 는 항목 부터 공중 쉼표 하나 도 제출 을 거부 하 는 항목 까지.
나 는 우리 대부분 이 코드 품질 에 동의 할 것 이 라 고 생각한다.파일 을 열 때 코드 는 코드 를 쓰 는 것 이 편안 하고 코드 논리 에 집중 할 수 있 습 니 다.
코드 검사 도 상수 배분 과 쓰기 오류,심지어 전형 적 인'Undefined is not a function'오류 등 오 류 를 발견 하 는 데 도움 을 줄 수 있 습 니 다.
나의 건의:당신 의 팀 이 요구 하 는 코드 심사 규칙 을 포옹 하 세 요.저 는 JS 에서 ESLint 를 사용 하고 Sass 프로젝트 Atom 에서 scss-lin 을 사용 합 니 다.변환 이 편리 하도록 규칙 을 설정 할 수도 있 습 니 다.엄격 한 요 구 를 하고 나 쁜 코드 를 제출 하지 않 으 려 면pre-pushnpm 스 크 립 트 를 실행 하여 push 전 검 사 를 합 니 다.
10.Express 프로젝트 에서 React 렌 더 링 을 하 는 것 이 가능 합 니 다.
일반 애플 리 케 이 션 을 설치 하 는 방법 을 소개 하 는 블 로그 가 많 지만 대부분 단일 페이지 애플 리 케 이 션 을 원한 다 고 가정 합 니 다.여러 페이지 Express 애플 리 케 이 션 에서 단일 React 구성 요 소 를 렌 더 링 하 는 방법 을 소개 하 는 글 이 별로 없습니다.
나의 건의:이런 상황 에서 ReactDOMServer 는 너의 친구 가 될 것 이다.구성 요 소 를 페이지 세 션 으로 보고 템 플 릿 에 전달 하여 렌 더 링 할 수 있 습 니 다.
11.사가 가 내 머리 를 풀 로 만 들 었 다.
Saga 는 ES6 생 성기 의 새로운 특성 을 기반 으로 한 리 눅 스 미들웨어 입 니 다."생 성 기 는 자신의 state 를 유지 할 수 있 는 교체 알고리즘 을 정의 합 니 다.실제 적 으로 이것 은 정상 적 인 자 바스 크 립 트 작업 흐름 과 다르다.왜냐하면 다른 Promise 코드 를 기반 으로 실 행 될 때 이 함 수 는 실행 과정 에서 멈 출 수 있 기 때문이다.
내 가 처음 도 아니 고 마지막 으로 이 말 을 하 는 사람 도 아 닐 거 야.Saga 는 내 머리 를 풀 어 주 었 어.사 가 를 처음 배 웠 을 때 난 장 판 이 었 지만 결국 나 는 그것 을 정복 했다.하지만 돌 이 켜 보면 내 가 처음부터 생 성 기 를 이해 했다 면 일이 좀 좋아 졌 을 것 이다.
제 제안:Saga 를 처음 사용 하고 팀 에서 관련 경험 이 없 는 사람 이 라면 Promise 와 Generator 를 먼저 이해 하 는 것 이 도움 이 될 것 입 니 다.
위 에 있 는 것들 은 React 를 공부 한 이래 제 가 총 결 한 경험 입 니 다.작년 은 저 에 게 아주 다른 해 였 고 다양한 유형의 프로젝트 를 접 하면 서 많은 것 을 배 웠 습 니 다.앞으로 도 새로운 것 을 탐색 할 시간 이 기대 된다.예 를 들 어 React Native.당신 이 본문 을 다 볼 수 있어 서 매우 기 쁩 니 다.당신 에 게 도움 이 되 기 를 바 랍 니 다.
글 에 무엇 을 더 주의해 야 한다 고 생각 하거나 무엇 을 추가 해 야 한다 고 생각한다 면알려 주세요..
나 는 최근 에'React.js 작은 책',React.js 에 관심 이 있 는 동 화 를 쓰 고 있다.