React/Redux：深层嵌套状态的渲染、更新及大数据量处理问询

Alright, let's walk through each of your requirements with practical, production-ready solutions for React and Redux. I've broken this down into three clear sections to tackle each problem:

1. Rendering Nested <div> Structures #

The cleanest way to handle nested data is with a recursive React component. It will render each node and recursively call itself for any child nodes. Just make sure to handle unique keys (even with duplicate IDs, combine parent context or indexes to avoid React warnings).

import { memo } from 'react';

// Wrap with memo early to optimize performance (we'll cover this more later)
const NestedNode = memo(({ node }) => {
  return (
    <div className="nested-node">
      {node.text}
      {node.children.length > 0 && (
        <div className="child-container">
          {node.children.map((child, index) => (
            // Use a composite key to avoid conflicts with duplicate IDs
            <NestedNode key={`${node.id}-${index}`} node={child} />
          ))}
        </div>
      )}
    </div>
  );
});

// Usage in your app:
// <NestedNode node={yourRootData[0]} />

2. Updating Deeply Nested State in Redux #

Directly mutating nested Redux state is a no-go—you need immutable updates. For deep structures, two approaches work best: manual recursive updates (no libraries) or using Immer to simplify the process.

Option 1: Manual Immutable Update #

Write a helper function to recursively find and update the target node, returning a new state tree each time:

// Helper to update a node by ID
const updateNestedNode = (nodes, targetId, newText) => {
  return nodes.map(node => {
    if (node.id === targetId) {
      // Return a new node with updated text
      return { ...node, text: newText };
    }
    // Recurse into children if they exist
    if (node.children.length > 0) {
      return { ...node, children: updateNestedNode(node.children, targetId, newText) };
    }
    return node;
  });
};

// Reducer example
const dataReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_NODE_TEXT':
      return {
        ...state,
        nestedData: updateNestedNode(state.nestedData, action.payload.targetId, action.payload.newText)
      };
    default:
      return state;
  }
};

Option 2: Use Immer for Simplified Updates #

Immer lets you write "mutative" code that gets converted to immutable updates under the hood—way cleaner for deep nesting:

import { produce } from 'immer';

const dataReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_NODE_TEXT':
      return produce(state, draft => {
        // Recursively find and update the target node in the draft
        const findAndUpdate = (nodes) => {
          for (const node of nodes) {
            if (node.id === action.payload.targetId) {
              node.text = action.payload.newText;
              return; // Exit once found
            }
            if (node.children.length > 0) {
              findAndUpdate(node.children);
            }
          }
        };
        findAndUpdate(draft.nestedData);
      });
    default:
      return state;
  }
};

Pro Tip: For faster updates, pass a path array (e.g., [0, 1, 0] for root → first child → second child → first grandchild) instead of searching by ID. This avoids recursive traversal entirely.

3. Handling Large Datasets (3000+ Nodes) #

Rendering 3000+ DOM nodes will cause performance hits—here's how to fix it:

a. Prevent Unnecessary Re-renders #

We already wrapped NestedNode with React.memo, but you can add a custom comparison function to be even more precise:

const areNodesEqual = (prevProps, nextProps) => {
  // Only re-render if text or children count changes
  return prevProps.node.text === nextProps.node.text &&
         prevProps.node.children.length === nextProps.node.children.length;
};

const NestedNode = memo(({ node }) => { /* ... */ }, areNodesEqual);

b. Virtualized Scrolling #

Use libraries like react-window or react-virtualized to only render nodes that are visible in the viewport. For nested structures, first flatten the tree (or use a dedicated virtual tree component):

import { FixedSizeList as List } from 'react-window';

// Helper to flatten the nested tree into a flat array with path info
const flattenTree = (node, parentPath = []) => {
  const result = [{ ...node, path: parentPath }];
  node.children.forEach((child, index) => {
    result.push(...flattenTree(child, [...parentPath, index]));
  });
  return result;
};

const VirtualizedNestedList = ({ rootNode }) => {
  const flatNodes = flattenTree(rootNode);

  const Row = ({ index, style }) => {
    const node = flatNodes[index];
    // Add indentation based on how deep the node is
    const indent = node.path.length * 24;
    return (
      <div style={{ ...style, paddingLeft: indent }}>
        {node.text}
      </div>
    );
  };

  return (
    <List
      height={600}
      itemCount={flatNodes.length}
      itemSize={32}
      width="100%"
    >
      {Row}
    </List>
  );
};

c. Lazy Load Child Nodes #

If your data comes from an API, don't load all 3000 nodes at once. Load only the root nodes, and fetch child nodes when the user expands a parent. This drastically reduces initial load time and DOM size.

d. Optimize Redux Updates #

When updating a node, ensure only the target node and its ancestors get new references (Immer does this automatically). This way, React only re-renders the changed parts of the tree, not the entire dataset.

内容的提问来源于stack exchange，提问作者Fabian Lurz