어이, 개발자들!응용 프로그램에서 불필요한 구성 요소를 다시 보여 줍니까?
우리는 반드시 이 단계를 거쳐야 한다. 구성 요소가 백그라운드에서 끊임없이 데이터를 업데이트한 후에 전체 성능이 영향을 받는다! 
대부분의 경우, 코드를 최적화하기 위해 최선을 다하기 시작할 때, 이것은 매우 복잡하고 힘든 과정이라고 가정할 수 있습니다. 왜냐하면 React의 모든 일은 DOM을 업데이트할 때 매우 빨리 발생하기 때문입니다.
또한 DOM이 업데이트되었다고 해서 실제로 변경된 것은 아닙니다.그렇다면 어떻게 이런 상황을 막거나 렌더링을 강제합니까?본문에서 우리는 구체적인 조작 방법을 볼 것이다.

이것은 인상적인 힘이다!

렌더링에 대한 빠른 주석📝

React's createElement() function creates and returns a new element according to the element of the given type.

props든 children든 모든 업데이트는 필요할 때만 자동으로 완료됩니다.React는 DOM을 위해 작성된 JSX를 기반으로 가상 DOM이라는 가상 인스턴스를 만들었습니다.DOM 업데이트의 전체 과정은 항상 다음 세 단계로 구성됩니다.

Render: React 요소를 DOM에 표시하고 구성 요소에 대한 참조를 되돌려줍니다.출력은 createElement 기능에서 나온다.

Reconciliation: Diffing Algorithm를 사용하여 새 요소를 이전 요소와 비교하고 차이가 있으면 가상 DOM을 업데이트합니다.

제출: 마지막으로 실제 변경(DOM 업데이트) 단계입니다. 

클래스와 함수 구성 요소 형식에서 어떻게 다시 렌더링하는지 봅시다.

클래스 어셈블리에서 렌더링 강제

이것은 매우 간단하다.React API에서 제공하는 forceUpdate() 함수를 사용할 수 있습니다.다음과 같은 구문을 사용합니다.

component.forceUpdate(callback)

렌더링은 상태 이외의 다른 데이터에 의존하고 특정 구성 요소를 다시 렌더링하기 위해 반응해야 할 때 유용합니다.이 과정은 생애주기 연결을 뛰어넘어 실현된다.
 
현재 shouldComponentUpdate() 와 setState 를 비교하면, forceUpdate 이 이루어져도 후자는 구성 요소를 업데이트할 것입니다.

구성 요소를 업데이트해야 합니다. ⚠️ Pssst。잠깐만, 잠깐만!근데 여기 경고가 하나 있어요.forceUpdate()를 사용하지 말고 본문을 읽어야 합니다.도구랑 이거.render () 의 상태입니다.

그렇다면 해결 방안은 무엇입니까?

상태 변경 시 다시 렌더링

사용render() 방법 및 .setState()의 모든 목적은 대기열의 변경 사항을 구성 요소의 상태에 추가하고,React가 업데이트된 상태로 이 구성 요소와 하위 구성 요소를 다시 보여야 한다고 알려주는 것입니다.이 구문은 다음과 같습니다.

setState(updater, [callback])

구성 요소가 설치되었을 때의 상태를 업데이트합니다.

class App extends React.Component {
  componentDidMount() {
    this.setState({});
  }

  render() {
    console.log('Render is invoked')
    return <h1>Hi!</h1>;
  }
}

여기서 우리는 setState 생명주기 연결을 사용하여 상태를 갱신한다.
또 다른 예는 구성 요소의 이벤트입니다.

class App extends React.Component {
  state = {
    msg: ""
  };

  handleClick = () => {
    this.setState({ msg: "Updated!" });
  };

  render() {
    console.log('Render is invoked');
    return (
      <>
        <button onClick={this.handleClick}>Click me</button>
        <div>{this.state.msg}</div>
      </>
    );
  }
}

이런 상황에서 단추 하나만 누르면 우리는 상태를 업데이트할 수 있다.

componentDidMount（） 기능 구성 요소에서 렌더링 강제 적용

클래스 구성 요소에서처럼 우리는 선택의 유연성이 없다forceUpdate.그러나 우리는 당연히 사용 의 개념을 통해 가능한 한 그것에 접근할 수 있다.
구체적으로 말하자면, 만약에 우리가 React Hooks 갈고리를 사용한다면, 간단한 계수기 응용 프로그램에 대해, 그 중에서 단추의 useState에서, 우리는 onClick의 setter 함수 내의 이전 계수를 증가시킨다. (예를 들어: useState.이것이 바로 우리가 계수기 구성 요소를 강제로 다시 렌더링해야 하는 점이다.
다음은 관련 예입니다.

import React, {useState} from ‘react’;

const App = props => {
    const [count, setCount] = useState(0)

    const onClickHandler = event = => {
        setCount(count => count + 1)
    }

    return (    
        <button onClick={onClickHandler}>Click me</button>
    )
}

너는 심지어 필요에 따라 자신의 것을 작성할 수 있다 setCount .그것은 같은 방식으로 일할 것이다. 단지 이번에는 이 갈고리를 제어해서 다시 칠해야 할 곳에 여러 개의 점을 추가할 것이다.

사용자 정의 연결 다음 단계는 어디로 갑니까?🤔

다음 리소스에 액세스하여 다양한 사례 시나리오 및 예제에 대해 더 자세히 설명함으로써 새롭게 렌더링할 수 있습니다.
📄
React render() documentation

React | by Harsh Patel | Weekly Webtips | Medium에서 연결 고리로 다시 렌더링 거친 파텔・ 2020년 9월 29일・ 중등적

2015년 6월 3일
참고: 4
답: 21

나는 외부의 관찰할 수 있는 대상이 하나 있는데, 나는 그것의 변화를 듣고 싶다.객체가 업데이트되면 변경 이벤트가 발생하고 변경 사항이 발견되면 구성 요소를 다시 시작하려고 합니다.
최고급React.render이 생겼다는 것은 가능하지만, 하나는...

909

읽어 주셔서 감사합니다.오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

TIME TO GET TO WORK! 😀

Image source: https://t.co/t9tnTL53go pic.twitter.com/vblvcTRpqL

— Microsoft Developer UK (@msdevUK)

개방형 전체 문제

📫 Subscribe to my weekly developer newsletter 📫
PS: 올해부터 저는 이곳에 지역사회 개발에 관한 글을 쓰기로 했습니다.전에 언론에 썼어요.내 글을 보고 싶은 사람이 있다면, 내 미디어 자료다.