[javascript] React-함수 컴포넌트를 강제로 렌더링하는 방법은 무엇입니까?

Question 1

함수 구성 요소가 있는데 강제로 다시 렌더링하고 싶습니다.

어떻게 할 수 있습니까?
인스턴스가 없기 때문에 this호출 할 수 없습니다 this.forceUpdate().

Question 2

? 이제 React 후크를 사용하여

반응 후크를 사용하여 이제 useState()함수 구성 요소를 호출 할 수 있습니다 .

useState()다음 두 가지의 배열을 반환합니다.
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에게 render 함수를 다시 실행하도록 지시합니다.

편집하다

이 답변의 이전 버전에서 스 니펫은 부울 값을 사용하고 forceUpdate(). 이제 답변을 편집 했으므로 코드 조각은 부울이 아닌 숫자를 사용합니다.

왜 ? (당신은 나에게 물어볼 것입니다)

한 번은 forceUpdate()두 개의 다른 이벤트에서 두 번 호출되어 원래 상태에서 부울 값을 재설정하고 구성 요소가 렌더링되지 않았기 때문입니다.

때문에에 useState(의 세터 setValue여기), React새와 이전 상태를 비교 하고 상태가 다른 경우에만 렌더링합니다.

Question 3

React v16.8 업데이트 (2019 년 2 월 16 일 realease)

React 16.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

당신은 할 수 없음, 국가없는 기능 구성 요소는 정상 functions반환 것을 jsx당신이에서 연장되지 않습니다으로는 수명주기 방법 반응에, 당신이 어떤 액세스 할 수 없습니다 React.Component.

함수 컴포넌트를 render클래스 컴포넌트 의 메소드 부분 으로 생각하십시오 .

Question 4

공식 FAQ ( https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate )는 이제 정말로 필요한 경우 다음 방법을 권장 합니다.

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

  function handleClick() {
    forceUpdate();
  }

Question 5

use-force-update 라는 타사 라이브러리를
사용
하여 반응 기능 구성 요소를 강제로 렌더링했습니다. 매력처럼 작동했습니다. 프로젝트에서 패키지 가져 오기를 사용하고 이와 같이 사용하십시오.

import useForceUpdate from 'use-force-update';

const MyButton = () => {

  const forceUpdate = useForceUpdate();

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

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

Question 6

면책 조항 : 문제에 대한 답이 아닙니다.

여기에 중요한 메모를 남겨주세요 :

상태 비 저장 구성 요소를 강제 업데이트하려는 경우 디자인에 문제가있을 가능성이 있습니다.

다음 경우를 고려하십시오.

상태를 변경하고 부모 구성 요소를 다시 렌더링 할 수있는 자식 구성 요소에 setter (setState)를 전달합니다.
상태 해제 고려
연결된 구성 요소에서 자동으로 다시 렌더링을 강제 할 수있는 Redux 저장소에 해당 상태를 넣는 것을 고려하십시오.

Question 7

컴포넌트에 prop을 추가하고 stateless 컴포넌트의 부모 컴포넌트에 state를 추가한다면 후크를 명시 적으로 사용하지 않고도이 작업을 수행 할 수 있습니다.

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>
  )
}

Question 8

받아 들여지는 대답은 좋습니다. 이해하기 쉽게하기 위해서입니다.

구성 요소 예 :

export default function MyComponent(props) {

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

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

다시 렌더링을 강제하려면 아래 코드를 호출하십시오.

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