React-devtools: "업데이트 강조"는 성능 조정된 React 앱에 대해 가양성을 제공합니다.

구성 요소 가 다시 렌더링되는 것을 방지하고 있지만 React Redux에서 생성된 connect() 래퍼는 여전히 다시 렌더링됩니다. 조언을 잘못 해석했을 수도 있다고 생각합니다(FAQ를 읽지 않았기 때문에 확실하지 않음). 대신 해야 할 일은 mapStateToProps 결과가 변경되지 않는 항목에 대해 얕게 동일한지 확인하는 것입니다 .

다음은 아이디어를 제공하는 diff입니다.

diff --git a/src/components/todo-view.js b/src/components/todo-view.js
index 9559a04..a3c0ac6 100644
--- a/src/components/todo-view.js
+++ b/src/components/todo-view.js
@@ -2,24 +2,12 @@ import React from 'react';
 import { PropTypes } from 'prop-types';

 export class TodoView extends React.Component {
-    static propTypes = {
-        todoId: PropTypes.number.isRequired,
-        todoMap: PropTypes.object.isRequired
-    };
-
-    shouldComponentUpdate(nextProps) {
-        const { todoId, todoMap } = this.props;
-        const { todoMap: nextTodoMap } = nextProps;
-        return todoMap[todoId] !== nextTodoMap[todoId];
-    }
-
     render() {
-        const { todoId, todoMap } = this.props;
-        console.log('-----> TodoView.render():', todoId);
+        const { todo } = this.props;

         return (
             <tr>
-                <td >{todoMap[todoId]}</td>
+                <td >{todo}</td>
             </tr>
         );
     }
diff --git a/src/containers/todo-view-container.js b/src/containers/todo-view-container.js
index b3930f0..ad3e37f 100644
--- a/src/containers/todo-view-container.js
+++ b/src/containers/todo-view-container.js
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import { TodoView } from '../components/todo-view';

-const mapStateToProps = state => ({
-    todoMap: state.todoMap
+const mapStateToProps = (state, ownProps) => ({
+    todo: state.todoMap[ownProps.todoId]
 });

 export const TodoViewContainer = connect(mapStateToProps)(TodoView);

cc @markerikson FAQ의 내용이 설명을 사용할 수 있는 경우

핑 주셔서 감사합니다. 수정해야 할 구체적인 내용은 _생각_하지 않지만 @nareshbhatia , 정보가 충분하지 않다고 생각되면 Redux 리포지토리에 자유롭게 문제를 제출하세요.

도움을 주신 @gaearon & @markerikson 에게 감사드립니다. 나는 문서가 매우 명확하다고 생각합니다. 내가 생각하지 못한 유일한 트릭은 (@gaearon이 제안한 대로) ownProps 를 사용하여 컨테이너 내부에서 바로 todo $를 해결하는 것입니다(전체 맵을 뷰에 전달하는 대신). 이것이 비효율적인 렌더링의 근본 원인이었습니다. 귀하의 제안에 따라 내 저장소를 수정했습니다. 앞으로 다른 분들께도 유익한 교육이 되었으면 합니다.

다시 한번 감사합니다!