React-devtools: "हाइलाइट अपडेट" एक प्रदर्शन ट्यून किए गए रिएक्ट ऐप के लिए झूठी सकारात्मकता देता है

आप अपने घटकों को पुन: प्रस्तुत करने से रोक रहे हैं, लेकिन रिएक्ट रेडक्स द्वारा उत्पन्न connect() रैपर अभी भी फिर से प्रस्तुत करते हैं। मुझे लगता है कि आपने सलाह की गलत व्याख्या की होगी (सुनिश्चित नहीं है क्योंकि मैंने अक्सर पूछे जाने वाले प्रश्नों को नहीं पढ़ा है): इसके बजाय आपको यह सुनिश्चित करने की ज़रूरत है कि mapStateToProps परिणाम उन चीज़ों के लिए उथले बराबर है जो नहीं बदलते हैं ।

आपको एक विचार देने के लिए यहां एक अंतर है:

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 अगर अक्सर पूछे जाने वाले प्रश्न में कुछ स्पष्टीकरण का उपयोग कर सकता है

पिंग के लिए धन्यवाद। मुझे नहीं लगता कि कुछ भी विशिष्ट है जिसे संपादित करने की आवश्यकता है, लेकिन @nareshbhatia , अगर आपको लगता है कि यह अपर्याप्त जानकारीपूर्ण है, तो Redux रेपो पर एक समस्या दर्ज करने के लिए स्वतंत्र महसूस करें।

आपकी मदद के लिए धन्यवाद @gaearon और @markerikson । मुझे लगता है कि दस्तावेज़ बहुत स्पष्ट हैं। एकमात्र चाल जिसे मैंने नहीं सोचा था (जैसा कि @gaearon द्वारा सुझाया गया है) ownProps का उपयोग कंटेनर के अंदर todo $ को हल करने के लिए करना है (पूरे मानचित्र को दृश्य में पास करने के बजाय)। यह अक्षम प्रतिपादन का मूल कारण था। मैंने आपके सुझाव के आधार पर अपना रेपो तय कर लिया है। उम्मीद है कि यह भविष्य में दूसरों के लिए शैक्षिक है।

एक बार फिर धन्यवाद!