react+ts 간단 한 jira 프로젝트 의 최 적 실천 기록 실현

숙련 된 종목
react+ts
비록 내용 이 비교적 적 지만 건어물 이 매우 많 습 니 다.특히 hooks 의 포장,ts 의 일반적인 이해,사용 이 더욱 향상 되 었 습 니 다.
프로젝트 코드:https://gitee.com/fine509/react_jiar
효과 도



이것 은 세 개의 주요 페이지 이 고,또 약간의 세부 사항 이 있다.



등등
주의 할 점 이 있다.

오류 경계 처 리 를 사용 합 니 다.getDerived State FromError 는 한 페이지 어 딘 가 에 오류 가 발생 했 을 때 오류 보고 구성 요 소 를 표시 합 니 다.끊 는 것 이 아 닙 니 다.
useSearch Params 사용


이 api 는 우리 가 있 는 이곳 의 params 를 가 져 오고 설정 할 수 있 습 니 다.
react-query 사용



이 라 이브 러 리 인터넷 에서 그 에 대한 소 개 는 서버 데 이 터 를 관리 하 는 상태 관리 라 이브 러 리 입 니 다.그 는 redux 와 비슷 한 것 같 지만 많은 actions,reducer 를 작성 하지 않 아 도 됩 니 다.비동기 요청 을 지원 합 니 다.key 의 유일한 표지 데이터 로 전체 상태 관리 라 이브 러 리 와 유사 한 곳 이 있 습 니 다.특히 일부 표 에 적합 하 다.예 를 들 어 삭제 와 수정,검사 등 이 있 고 낙관적 인 업데이트 도 지원 한다.사고방식 은 예 를 들 어 삭제,수정,검사 한 다음 에 데 이 터 를 보 내 는 순간 에 원래 의 데 이 터 를 직접 가 져 오고 자신 이 작성 한 논리 코드 를 통 해 삭제,수정 한 데 이 터 를 얻 은 다음 에 페이지 에 직접 렌 더 링 하 는 것 이다.마치 직접 업 데 이 트 된 것 처럼 보이 지만 사실은 먼저 렌 더 링 을 하고 백 엔 드 에서 스스로 요청 을 보낸다.실패 할 때원본 데 이 터 를 가 져 와 서 페이지 에 다시 렌 더 링 하고 실 패 를 알 릴 수 있 습 니 다.마지막 으로 내 가 이 프로젝트 를 하 는 데 특히 고 민 스 러 운 점,데이터 관리 이다.
나 는 우선 스스로 hooks 를 봉 했다.

제 생각 은 한 페이지 에서 많은 데 이 터 를 얻 을 수 있 습 니 다.그러면 Loading 은 자신 이 쓰기 가 귀 찮 고 여러 개가 있 습 니 다.왜 loading 은 통일 적 으로 관리 하지 못 합 니까?그리고 data 는 하나의 대상 으로 설정 합 니 다.사용 할 때 이 data 의 유형 을 정의 할 수 있 습 니 다.

그리고 sendHttp 는 데 이 터 를 보 내 는 데 사 용 됩 니 다.

두 개의 인 자 를 받 아들 이 고 두 번 째 인 자 는 현재 데이터 가 data 의 어느 속성 에 놓 아야 하 는 지 입 니 다.
사용 효과



이렇게 하면 이 데이터 들 의 상 태 를 통일 적 으로 관리 할 수 있 지만,뒤에 보 니 사용 하기 도 매우 번거롭다.그래서 나 는 또 포기 했다.역시 원생 으로 쓰 는 것 이 편 하 다.
직접 정의 인터페이스

직접 사용

해,물론 나 도 redux 를 사용 하고 싶 지만 redux 는 action,reducer 등 을 작성 해 야 하 는 것 도 매우 번거롭다.
요즘 친구 에 게 ahooks usequest 도 괜찮다 고 들 었 어 요.다음 프로젝트 를 시도 해 보 세 요.
마지막 으로 이 프로젝트 에서 가장 많이 배 운 것 은 각종 hooks 를 포장 하 는 것 이다.
패키지


패키지 요청

그리고 ts 의 학습,
api 를 모 르 는 것 을 보면 바로 형식 정의 점 으로 들 어 갑 니 다.

이렇게 모 르 면 눌 러 서 하나씩 눌 러 요.

이런 무차별 폭격 의 경우,서서히 범 형의 사용 을 이해 하 게 될 것 이다.
여기 서 react+ts 가 간단 한 jira 프로젝트 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 react+ts jira 프로젝트 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!