리액트렉스를 사용하여 어레이의 각 요소를 개별적으로 연결하는 방법

리액트렉스를 사용하여 어레이의 각 요소를 개별적으로 연결하는 방법

현재 접근방식은 전체 도서목록을 도서목록 구성요소에 연결하는 것이다.그러나 주의 여러 필드만 변경하여 거대한 구성요소를 렌더링하는 것은 효율적이지 않다.나는 각각의 책 구성 요소를 각각의 책 상태에 연결하는 방법을 모른다.

그 프로젝트는 환원제를 사용하고 있다.이와 같은 애플리케이션 글로벌 상태

{
  "books": [
    {
      "field1": "field1",
      "field2": "field2",
      "field3": "field3",
    } ...
  ]
}

Book List 구성 요소에서 reacturantx를 사용하여 목록과 연결

export default connect(state => ({
  books: state.books
}))(BookListComponent);

이제 요구사항이 바뀌면 책의 분야는 자주 바뀌지 않을 것이다.문제는 한 필드가 변경될 경우 전체 BookListComponent를 업데이트한다는 것이다.그것은 내가 기대하는 수행적인 구성요소가 아니다.

다시 선택하기 위해 개별 Book 구성요소에 연결 논리를 적용하고 싶다.

주(州)에는 책의 색인이 없고, 나는 그것을 작동시키기 위해 connect를 어떻게 써야 할지 모르겠다.

export default connect(state => ({
  books[index]: state.books[index]
}))(BookListComponent);

진전에 감사드리며 모든 옵션을 환영한다.

너의 두 번째 예는 거의 정확하다.amapState함수는 하나의 매개 변수 대신 두 개의 매개 변수를 취한다고 선언할 수 있다.두 개의 파라미터가 선언된 경우, Redex는 다음을 호출할 것이다.mapState포장지 구성요소에 제공된 소품으로 기능한다.그래서, 그.mapState목록 항목의 함수는 다음과 같다.

const mapState = (state, ownProps) => {
    const book = state.books[ownProps.index];
    return {book}
}

내 블로그 게시물인 실용적 Redex, Part 6: Connected Lists, Forms 및 Performance는 이를 수행하는 방법에 대한 몇 가지 예를 보여주고 있으며, Redex에서 응용 프로그램 성능에 대한 주요 고려사항에 대해서도 논의한다.

원하는 구성 요소를 연결할 수 있다.최상위 구성 요소만 연결할 수 있는 하드 및 빠른 규칙은 없다.

최고 수준의 부품을 연결하고 소품을 전달하는 퍼포먼스 히트가 있는 동안 나는 그것이 눈에 띄게 해로운 영향을 미치는 것을 본 적이 없다.코드를 통해 데이터를 추적할 수 있다는 이점은 항상 내 생각에 가치가 있다.여기서 그것에 대한 논의가 있다.

변경된 필드만 업데이트 대응

책을 업데이트할 때마다 렌더 기능이 호출되는 것은 사실이지만, 그렇다고 전체 목록이 다시 렌더링되는 것은 아니다.

React에서 Virtual DOM을 사용하고 있다는 것을 기억하십시오.실제로 변경된 요소만 업데이트할 수 있게 해준다.

이 기사(짧고 코드 오픈에 대한 작업 코드 예가 있음) https://facebook.github.io/react/docs/rendering-elements.html과 이 기사(좀 더 자세한 내용) https://facebook.github.io/react/docs/state-and-lifecycle.html를 살펴보십시오.

만약 당신이 그 기사들을 읽었었다면, 당신은 당신이 필요한 모든 것은 당신의 앱을 검사하고 각각의 변경사항에서 실제로 렌더링되는 것을 보는 것이라는 것을 알고 있다.

참조URL: https://stackoverflow.com/questions/42487457/how-to-connect-each-element-of-array-individually-by-using-react-redux