Неправильно ли экспортировать React Hooks для управления глобальным состоянием? - PullRequest
Новая
       13

Неправильно ли экспортировать React Hooks для управления глобальным состоянием?

1 голос
/ 25 марта 2019

Я экспортирую возврат Hook, который я использую в корневом компоненте проекта.Тогда другим компонентам становится очень легко импортировать globalState и setGlobalState ().

Я провел несколько тестов здесь, и это сработало очень хорошо.Проблема в том, что я не видел никого в сообществе, использующего его таким же образом. 

import React, { useState } from "react";

import Level2 from "./components/Level2";

export let setGlobalState = () => {};
export let globalState = {};

const initalState = { counter: 0 };

const App = () => {
  [globalState, setGlobalState] = useState(initalState);
  return (
    <>
      <Level2 />
    </>
  );
};

export default App;

Неправильно ли управлять глобальным состоянием таким образом?Если это так, то почему?

Здесь у меня есть хранилище со всем проектом: https://github.com/andregardi/global-state-with-hooks

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

У этого подхода есть некоторые проблемы с обновлениями. Только дочерние элементы компонента App могут реагировать на глобальные изменения состояния. Эти дети по-прежнему могут не перерисовываться, если что-то в дереве блокирует обновление (PureComponent, React.memo и т. Д.)

Также setGlobalState может быть переопределено некоторым модулем.

Проверьте это пример , чтобы увидеть проблему. Все компоненты будут обновлять глобальное состояние, но «сломанный» не будет реагировать на обновления, потому что его реквизиты не меняются.

0 голосов
/ 25 марта 2019

Не очень правильно определять состояния глобально, а затем изменять их, потому что может потребоваться, чтобы несколько экземпляров одного и того же компонента имели свое собственное состояние, а не разделяли его.Если вы определите состояние глобально, все они будут иметь одно и то же состояние, что приведет к несоответствиям

DEMO

const { useState } = React;
let initialState = 0;
let globalState;
let setGlobalState;

function Counter () {
   [globalState, setGlobalState] = useState(initialState);
   return (
      <div>
         <div>Count: {globalState}</div>
         <button onClick={() => setGlobalState(count => count + 1)}>Increment</button>
      </div>
   )
}

function App() {
   return (
      <div>
        <div>
          <div>Counter 1: </div>
          <Counter />
        </div>
        <div>
          <div>Counter 2: </div>
          <Counter />
        </div>
      </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"/>
...