Могу ли я вызвать forceUpdate в компоненте без гражданства?

Ответ 1

NowВы можете теперь, используя ловушки React

Используя перехватчики реагирования, теперь вы можете вызывать useState() в функции вашего компонента. Это вернет массив из 2 вещей: значение и функцию "setter", которую вы можете использовать для обновления первого возвращенного значения, и, таким образом, вынудит ваш компонент функции выполнить повторный рендеринг, как это делает forceUpdate:

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(true); //boolean state
    return () => setValue(!value); // toggle the state to force render
}

function MyComponent() {
    // use your hook her
    const forceUpdate = useForceUpdate();

    return (
        <div>
            {/*Clicking on the button will force to re-render like force update does */}
            <button onClick={forceUpdate}>
                Click to re-render
            </button>
        </div>
    );
}

Вы можете найти демо здесь.

Вышеуказанный компонент использует пользовательскую функцию перехвата (useForceUpdate), которая использует перехват булевого состояния (useState). Он переключает логическое состояние и, таким образом, указывает React перезапустить функцию рендеринга.

Ответ 2

Обновление реагирует v16.8 (16 февраля 2019 года)

Поскольку реагирует на выпуск 16.8 с зацепками, функциональные компоненты теперь могут сохранять постоянство state. С помощью этой способности вы теперь можете подражать a forceUpdate:

function App() {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);
  console.log("render");
  return (
    <div>
      <button onClick={forceUpdate}>Force Render</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

Ответ 3

Отказ от ответственности: НЕ ОТВЕТ НА ПРОБЛЕМУ.

Оставляя Важное примечание здесь:

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

Рассмотрим следующие случаи:

1. Передайте метод set (setState) дочернему компоненту, который может изменить состояние и вызвать повторную визуализацию родительского компонента.
2. Рассмотреть возможность поднятия состояния
3. Подумайте о том, чтобы поместить это состояние в свое хранилище Redux, что может автоматически вызвать повторную визуализацию на подключенных компонентах.