関数コンポーネントがあり、強制的に再レン​​ダリングしたいと思います。

どうすればよいですか？
インスタンスthisがないので、呼び出すことはできませんthis.forceUpdate()。

🎉Reactフックを使用してできるようになりました

反応フックを使用useState()して、関数コンポーネントを呼び出すことができるようになりました。

useState() 次の2つの配列を返します。
ます。1。現在の状態を表す値。
2.そのセッター。値を更新するために使用します。

そのセッターで値を更新すると、再描画にあなたの機能コンポーネントを強制的に、
同じようにforceUpdate行います。

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => ++value); // update the state to force render
}

function MyComponent() {
    // call your hook here
    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に指示します。

編集

この回答の古いバージョンでは、スニペットはブール値を使用し、でそれを切り替えましたforceUpdate()。回答を編集したので、スニペットはブール値ではなく数値を使用します。

どうして ？（あなたは私に尋ねるでしょう）

あるときforceUpdate()、2つの異なるイベントから2回呼び出されたため、ブール値が元の状態にリセットされ、コンポーネントがレンダリングされなかったためです。

であるためuseStateのセッター（setValueここでは）、React新しいものと以前の状態を比較し、そして状態が異なる場合にのみレンダリングします。

react v16.8を更新します（2019年2月16日リリース）

フックでリリースされたreact16.8以降、関数コンポーネントは永続的に保持できるようになりましたstate。その能力であなたは今：を模倣することができます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"/>

このアプローチは再検討する必要があり、ほとんどの場合、更新を強制する必要がある場合は、おそらく何か間違ったことをしていることに注意してください。

反応する前に16.8.0

いいえ、できません。State-Less関数コンポーネントは正常でありfunctions、を返します。jsxから拡張していないため、ReactライフサイクルメソッドにアクセスできませんReact.Component。

function-componentrenderは、クラスコンポーネントのメソッド部分と考えてください。

公式FAQ（https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate）では、本当に必要な場合にこの方法を推奨しています。

  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

  function handleClick() {
    forceUpdate();
  }

use-force-updateというサードパーティのライブラリを使用して 、react機能コンポーネントを強制的にレンダリングしました。魅力のように働いた。プロジェクトにパッケージをインポートして、このように使用するだけです。

import useForceUpdate from 'use-force-update';

const MyButton = () => {

  const forceUpdate = useForceUpdate();

  const handleClick = () => {
    alert('I will re-render now.');
    forceUpdate();
  };

  return <button onClick={handleClick} />;
};

免責事項：問題への回答ではありません。

ここに重要な注意を残します：

ステートレスコンポーネントを強制的に更新しようとしている場合は、デザインに問題がある可能性があります。

次の場合を考えてみましょう。

1. セッター（setState）を子コンポーネントに渡します。これにより、状態が変更され、親コンポーネントが再レンダリングされます。
2. 状態を持ち上げることを検討してください
3. その状態をReduxストアに配置することを検討してください。これにより、接続されたコンポーネントで自動的に再レン​​ダリングが強制される可能性があります。

これは、コンポーネントに小道具を追加し、ステートレスコンポーネントの親コンポーネントに状態を追加する場合、フックを明示的に使用せずに実行できます。

const ParentComponent = props => {
  const [updateNow, setUpdateNow] = useState(true)

  const updateFunc = () => {
    setUpdateNow(!updateNow)
  }

  const MyComponent = props => {
    return (<div> .... </div>)
  }

  const MyButtonComponent = props => {
    return (<div> <input type="button" onClick={props.updateFunc} />.... </div>)
  }

  return (
    <div> 
      <MyComponent updateMe={updateNow} />
      <MyButtonComponent updateFunc={updateFunc}/>
    </div>
  )
}

受け入れられた答えは良いです。理解しやすくするためだけに。

コンポーネントの例：

export default function MyComponent(props) {

    const [updateView, setUpdateView] = useState(0);

    return (
        <>
            <span style={{ display: "none" }}>{updateView}</span>
        </>
    );
}

再レンダリングを強制するには、以下のコードを呼び出します。

setUpdateView((updateView) => ++updateView);