управление состоянием для комплекса JSON с использованием хуков - PullRequest
Новая
       17

управление состоянием для комплекса JSON с использованием хуков

0 голосов
/ 15 мая 2019

вопрос по архитектуре React App и управлению состоянием с огромным древовидным списком с реагирующими хуками - я получаю огромный список JSON, и когда когда-либо будет происходить обновление или уведомление через сокет, я получу тот же самый JSON с древовидной структурой, с изменением небольшого конечного узла, и он будет перерисовывать все дочерние компоненты, я знаю, с помощью redux я могу структурировать приложение, передавая только определенные объекты состояния, игнорируя другие и сохраняя их в хранилище. Как я должен структурировать свой компонент с помощью ловушек реагирования, таких как управление этим огромным объектом JSON

1 Ответ

0 голосов
/ 23 мая 2019

Вот один из способов сделать это:

Сохраните ваш большой JSON в состоянии и установите несколько useEffect() для запуска на основе изменений определенных свойств этого большого дерева JSON.Обновите компоненты, связанные с этими свойствами, внутри каждого соответствующего useEffect(). 

function App() {

  // THIS IS TO AVOID THE EFFECTS TO RUN ON 1ST RENDER (WHEN STATE IS 1ST CREATED)
  const isFirstRender = React.useRef(true);

  // THIS IS YOUR BIG JSON TREE
  const [deepState, setDeepState] = React.useState({
    propA: {
      propAA: false
    },
    propB: {
      propBB: false
    }
  });
  
  // THIS SIMULATES YOUR 1ST SOCKET MSG
  React.useEffect(()=>{
    setTimeout(
      ()=>setDeepState((prevState) => ({
        propA: {
          propAA: false
        },
        propB: {
          propBB: true
        }
      })),1500);
  },[]);

  // THIS SIMULATES A 2ND SOCKET MSG
  React.useEffect(()=>{
    setTimeout(
      ()=>setDeepState((prevState) => ({
        propA: {
          propAA: true
        },
        propB: {
          propBB: true
        }
      })),3000);
  },[]);
  
  // THIS WILL UPDATE COMPONENTS THAT CARE ABOUT ONE SPECIFIC DEEP PROPERTY
  React.useEffect(()=>{
    if (isFirstRender.current === true) {
      return;
    }
    console.log('Deep property propB.propBB has changed to: ' + deepState.propB.propBB);
    console.log('Will updateComponents that depend on propB.propBB');
  },[deepState.propB.propBB]);

  // THIS WILL UPDATE COMPONENTS THAT CARE ABOUT ANOTHER SPECIFIC DEEP PROPERTY      
  React.useEffect(()=>{
  if (isFirstRender.current === true) {
    return;
  }
    console.log('Deep property propA.propAA has changed to: ' + deepState.propA.propAA);
    console.log('Will updateComponents that depend on propA.propAA');
  },[deepState.propA.propAA]);
  
  // THIS IS TO AVOID THE EFFECTS TO RUN ON 1ST RENDER (WHEN STATE IS 1ST CREATED)
  React.useEffect(()=>{
    isFirstRender.current = false;
  },[]);
  
  return(
    <div>Some Component</div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
...