Question

我需要在React.js中处理大型对象的建议。

示例：

const [myObject, setMyObject] = React.useState({
  next_step: {
    id: 1575567015473,
    block_type: 'message',
    position: 'bottom',
    message: 'lorem ipsum',
    actions: {
      id: 1575562323,
      type: 'step_action',
      title: 'Show answers',
      description: 'Resend answer to another user',
      method: 'show_answer',
      points: 30
    },
    waiting: {
    interval: '4h50m',
    id: 1,
    position: 'right,
    next_step: {
      id: 3,
      position: 'bottom',
      block_type: 'message',
      message: 'lorem ipsum 3',
      waiting: null,
      next_step: null
    }
    }
    next_step: {
      id: 2,
      position: 'bottom',
      block_type: 'message',
      message: 'lorem ipsum 2',
      waiting: null,
      next_step: {
          id: 4,
          position: 'bottom',
          block_type: 'message',
          message: 'lorem ipsum 4',
          waiting: null,
          next_step: null
        }
      }
  }

});

我使用递归来渲染带有值消息的输入输入更改后，我重新渲染对象。

示例：

const findObject = (id, obj, fn) => {
  if (obj.id === id) {
    return fn(obj);
  }

  if (obj.waiting && obj.waiting.id) findObject(id, obj.waiting, fn);
  if (obj.next_step && obj.next_step.id) findObject(id, obj.next_step, fn);
  return obj;
};
  
const inputHandler = (value, id) => {
  const strFlowData = JSON.stringify(myObject);
  const newFlowData = JSON.parse(strFlowData);

  const inputUpdate = newObj => {
    const slackBlocks = newObj.body.blocks;
    const slackMassage = slackBlocks[0].text;
    slackMassage.text = value;
    return null;
  };

  findObject(id, newFlowData.next_step, newObj => inputUpdate(newObj));
  setMyObject(newFlowData);
};

一切正常，但是如果此对象变大，输入更改时会出现问题吗？也许有更好的解决方案？

Answer 1

您应该使用纯组件树（或React.useMemo）并构建网站，仅需要检查已更改的零件即可进行重新渲染。每个输入本身都是一个组件，可以在检查属性是否更改的同时进行是否应该更新的检查。

React在传播虚拟dom方面做得很好，但是如果可以帮助并期望对性能产生影响，则可以进行优化。大多数情况下，它也使开发更容易：-）

与大对象反应更新状态

1 个答案: