반응에서 forceupdate의 사용법은 무엇입니까

반응에서 forceupdate()는 구성 요소가 shouldComponentUpdate()를 건너뛰고 render()를 직접 호출하는 데 사용됩니다. 이는 구성 요소의 일반적인 수명 주기 메서드를 트리거할 수 있습니다. 구문은 "comComponent.forceUpdate(callback)"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

react에서 forceupdate의 사용법은 무엇인가요?

React의 구성 요소는 상태나 전달된 props가 변경될 때만 다시 렌더링하지만 일부 데이터가 변경되거나 구성 요소의 다시 렌더링을 변경해야 하는 경우 React의 forceUpdate() 메소드를 사용합니다. forceUpdate()를 호출하면 구성 요소가 강제로 다시 렌더링되므로 shouldComponentUpdate() 메서드를 건너뛰고 구성 요소의 render() 메서드가 호출됩니다.

팁: 일반적으로 forceUpdate() 사용을 피하고 render()의 this.props 및 this.state에서만 읽으세요.

사용법:

component.forceUpdate(callback)

forceUpdate() 메서드를 사용하는 몇 가지 사용 사례가 있지만 필요할 때 후크, 소품, 상태 및 컨텍스트를 사용하여 구성 요소를 다시 렌더링하는 것이 가장 좋습니다.

기본적으로 구성 요소는 상태나 소품이 변경되면 다시 렌더링됩니다. render() 메서드가 다른 데이터에 의존하는 경우 forceUpdate()를 호출하여 React 구성 요소에 다시 렌더링해야 함을 알릴 수 있습니다.

forceUpdate()를 호출하면 구성 요소가 shouldComponentUpdate()를 건너뛰고 render()를 직접 호출하게 됩니다. 그러면 각 하위 구성 요소의 shouldComponentUpdate() 메서드를 포함하여 구성 요소의 일반 수명 주기 메서드가 트리거됩니다.

forceUpdate가 다시 렌더링됩니다. 일부 변수는 상태에 없으며 변수가 업데이트될 때 렌더링을 새로 고치려고 하거나 상태의 변수가 너무 깊어 업데이트 시 렌더링이 자동으로 트리거되지 않습니다. 이러한 경우 수동으로 forceUpdate를 호출하여 자동으로 render

Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "yema";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return (<div>{this.name}</div>);
    }
}
App.js
class App extends React.Component{
    handleClick(){
        this.subRef.refChangeName("yemafuren");
    }
    render(){
        return (<div>
            <Sub ref={(sub)=>{this.subRef = sub;}} />
            <button onClick={this.handleClick}>click</button>
        </div>);
    }
}

를 실행할 수 있습니다. 권장 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 forceupdate의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!