Как предотвратить двойное рендеринг, когда я использую реквизиты, useState и useEffect? - PullRequest
Новая
       2

Как предотвратить двойное рендеринг, когда я использую реквизиты, useState и useEffect?

0 голосов
/ 02 июня 2019

Например, у меня есть этот компонент 

const FooBar = (props) => {
  console.log("render")
  const [foo, setFoo] = useState(props.foo)
  useEffect(() => {
    setFoo(props.foo)
  }, [props.foo])
  return (
    <div>
      {foo} <button onClick={() => setFoo(x => x + 1)}>component plus</button>
    </div>
  );
}

И я могу изменить это реквизит, как это 

const App = () => {
  const [foo, setFoo] = useState(1)
  return (
    <div>
      <FooBar foo={foo} />
      <button onClick={() => setFoo(x => x + 1)}>parent plus</button>
    </div>
  );
}

Когда я нажимаю кнопку parent plus, компонент FooBar два раза rerender. первый - из смены реквизита, а второй - из setFoo внутри useEffect. Как я могу предотвратить повторную визуализацию?

1 Ответ

0 голосов
/ 02 июня 2019

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

Если вы несколько раз нажмете кнопку «компонент плюс», а затем нажмите кнопку «родительский плюс»,Ваш счетчик вернется к значению при последнем нажатии родительской кнопки.

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

Что бы вы сделали, это передать это состояние и функцию для установки этого состояния в дочерний компонент.

Ваш пример будетвыглядеть так: 

const App = () => {
  const [foo, setFoo] = React.useState(1);

  return (
    <div>
      <FooBar foo={foo} setFoo={setFoo} />
      <button onClick={() => setFoo(x => x + 1)}>parent plus</button>
    </div>
  );
};

const FooBar = props => {
  console.log("render");

  return (
    <div>
      {props.foo} <button onClick={() => props.setFoo(x => x + 1)}>component plus</button>
    </div>
  );
};
...