반응 http 요청을 배치할 위치

React http 요청은 비동기식 요청을 위한 작업인 componentDidMount에 배치되어야 하며, React 네트워크 요청은 일반적으로 덜 사용되는 componentWillMount에 배치될 수 있습니다.

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

반응 http 요청은 어디에 있나요? React 네트워크 요청은 어떤 라이프사이클에 배치되어야 합니까?

일반적으로 비동기식 요청의 경우에는 componentDidMount에서 작동하는 것이 가장 좋습니다. 동기식 상태 변경의 경우 일반적으로 덜 사용되는 componentWillMount에 배치할 수 있습니다.

ComponentWillMount에서 요청을 시작하면 결과를 일찍 얻을 수 있다고 생각한다면 이 아이디어는 실제로 잘못된 것입니다. 일반적으로 componentWillMount는 componentDidMount보다 몇 마이크로초 빠르지 않으며 이 차이는 무시할 수 있습니다.

리액트의 라이프사이클을 살펴보세요:

constructor() ----> componentWillMount() ----> render() ----> componentDidMount()

위 메소드는 위에서 아래로 순서대로 호출됩니다.

컴포넌트가 마운트될 준비가 되면 생성자는 맨 처음에 호출됩니다. 이때 컴포넌트는 아직 웹 페이지에 마운트되지 않았습니다.

ComponentWillMount 메서드는 생성자 뒤, 렌더링 전에 호출됩니다. setState 메서드를 호출하는 이 메서드의 코드는 다시 렌더링을 트리거하지 않으므로 일반적으로 데이터 로드에 사용되지 않습니다.

컴포넌트DidMount 메소드의 코드는 컴포넌트가 웹페이지에 완전히 마운트된 후에만 호출 및 실행되므로 데이터 로딩이 보장됩니다. 또한 이 메서드에서 setState 메서드를 호출하면 다시 렌더링이 트리거됩니다. 따라서 이 방법은 공식적으로 외부 데이터를 로드하거나 기타 부작용 코드를 처리하기 위해 고안되었습니다. 컴포넌트에 있는 데이터와 관련 없는 로딩도 생성자에서 할 수 있는데, 데이터 로딩이 아닌 컴포넌트 상태 초기화를 생성자가 담당하고, 생성자에서 SetState를 설정할 수 없고, 로딩 시간이 너무 깁니다. 또는 오류가 발생하면 페이지를 로드할 수 없습니다. 따라서 부작용이 있는 코드는 componentDidMount 메서드에 집중됩니다.

요약:

1. server-side 렌더링(isomorphism)과 관련이 있습니다. componentWillMount에서 데이터를 가져오면 데이터 가져오기가 서버 측에서 한 번, 클라이언트 측에서 한 번 실행됩니다. 이 문제는 componentDidMount에서 해결될 수 있습니다. componentWillMount도 두 번 렌더링됩니다.

2. 컴포넌트WillMount에서 데이터를 가져옵니다. 데이터는 렌더링 후에 도착해야 합니다. 초기 상태 설정을 잊어버리면 사용자 경험이 저하됩니다.

3.react16.0 이후에는 componentWillMount가 여러 번 실행될 수 있습니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 http 요청을 배치할 위치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!