후크

이 게시물은 며칠 동안 백로그되었습니다. 거의 모든 것이 지난 일요일(8/1)에 작성되었습니다.

이 게시물에서:

Intro

Infinite Loops and useEffect dependencies

리팩터링 리팩토링

나는 오늘 아침에 일부 희소한 프런트 엔드 코드를 리팩토링하기 위해 출발했습니다. 내 목표는 클래스 기반의 상태 저장 구성 요소를 후크가 장착된 기능 구성 요소로 바꾸는 것이었습니다. 시간이 많이 걸릴 것이라고는 예상하지 못했지만 이른 오후까지 먹어치웠다는 사실에 충격을 받지는 않았습니다. 놀랍게도 첫 번째 리팩터링의 중요한 요소를 리팩토링하여 이전 상태와 유사하게 되돌렸습니다. 꼬불꼬불한 과정이었지만 hook, route, React 방식을 탐색하면서 꽤 많이 배웠습니다.

무한 루프 및 useEffect 종속성

초기 클래스/상태 -> 기능/후크 변환이 형식을 찾은 후(결과는 이 문장 다음에 있음), 변환이 원활하기를 바라며 브라우저를 새로 고쳐 테스트를 실행했습니다.

//index.jsx
<Router>
  <Switch>
    <Route path="/all" exact component={Feed} />
    <Route path="/:user/feed" exact component={Feed} />
    <Route path="/:user/post/:post_id " exact component={(props) => <Post {...props}/>} />
  </Switch>
</Router>

//feed.jsx
 componentDidMount(){
    const path = this.props.match.path

    if (path === "/all"){
      httpHandler.getFeedAllUsers((err, data)=>{
      this.setState({postData:data})
      })
    } else if (path === "/:user/feed"){
        const user = this.props.match.params.user
        httpHandler.getFeedOneUser(user, (err, data)=>{
        this.setState({postData:data})
      })

    }
  }

대신 내가 본 것은 useEffect 후크에 의해 만들어지는 'get' 호출의 무한 루프였습니다. 본질적으로 주기는 다음과 같습니다(이것은 내 100% 잘못된 이해입니다).

전화 useEffect

통화 데이터

렌더 구성요소('useEffect'를 트리거함)

전화 useEffect

리피트

이 사이클을 끊는 방법? 먼저 문제를 이해하기 위해 약간의 독서를 했습니다. This post 문제와 솔루션을 잘 설명합니다.

내가 해야 할 일은 React에 관찰할 변경 사항을 제공하는 것이었습니다. 이것이 없으면 useEffect는 Feed가 마운트되었을 때만 호출됩니다. 그리고 피드는 변경된 URL로 다시 마운트되지 않기 때문에 새 URL에서 올바른 데이터를 렌더링하는 상태 변경을 생성하는 데이터 가져오기를 호출하지 않습니다. 본질적으로 저는 무한 루프의 반대에 직면했습니다. 즉, 제가 들어갈 수 없는 루프였습니다. 해당 함수 내부에서 데이터 가져오기에 대한 호출이 없었습니다.

내가 착륙 한 것은 요청중인 피드가 변경되었음을 나타내기 위해 소품을 사용하는 것이 었습니다. '사용자 게시물' 또는 '모든 게시물' 중 하나에서 다른 게시물로. 해당 소품을 useEffect에 종속성으로 전달하면 변경 시 useEffect에 신호를 보내 새로운 데이터를 가져옵니다.

결과 useEffect 구성 요소는 다음과 같습니다.

<Route path="/all" render={(props)=>(<Feed {...props} feedView={'all'}/>)} />

이제 이것을 입력할 때 '경로'와 같은 라우터 매개변수를 종속성으로 전달할 수 있었는지 궁금합니다. 그것이 작동한다면 내가 수행한 리팩터링을 피하고 컴포넌트<Route/>에 소품으로만 전달한 더 간단한 리팩터링으로 돌아갈 수 있습니다. 위의 코드 스니펫을 다음과 비교하십시오.

<Route path="/all" component={Feed} />

더 간단합니다.