React 클래스 구성 요소의 Render () 메소드는 무엇입니까?-프런트엔드 Q&A-php.cn

React 클래스 구성 요소의 Render () 메소드는 무엇입니까?

render() 메소드는 React 클래스 구성 요소의 중요한 부분입니다. 모든 클래스 구성 요소가 구현 해야하는 필수 방법입니다. render() 메소드의 주요 기능은 현재 상태 및 소품에 따라 구성 요소가 표시 해야하는 내용을 설명하는 것입니다. 구성 요소의 상태 또는 소품이 변경되면 RECT는 render() 메소드를 호출하여 UI를 업데이트 해야하는지 확인합니다.

다음은 render() 메소드가있는 클래스 구성 요소의 기본 예입니다.

 <code class="javascript">import React, { Component } from 'react'; class ExampleComponent extends Component { render() { return <div>Hello, {this.props.name}!</div>; } } export default ExampleComponent;</code>

로그인 후 복사

이 예에서 render() 메소드는 RECT가 DOM을 구성하고 업데이트하는 데 사용할 JSX를 반환합니다. render() 메소드는 구성 요소의 상태 또는 소품이 변경 될 때마다 호출되므로 구성 요소가 새 데이터를 다시 렌더링 할 수 있습니다.

Render () 메소드는 React에서 무엇을 반환합니까?

React의 render() 메소드는 다음 유형 중 하나를 반환해야합니다.

React 요소 : JSX를 통해 또는 React.createElement() 호출하여 생성 할 수 있습니다. 예를 들어:
```
 <code class="javascript">return <div>Hello, World!</div>;</code>
```
로그인 후 복사

배열 및 조각 : 여러 요소를 반환 할 수 있습니다. 예를 들어:

 <code class="javascript">return [ <li key="A">First item</li>, <li key="B">Second item</li>, <li key="C">Third item</li> ];</code>

로그인 후 복사

또는 조각 사용 :

 <code class="javascript">return ( <react.fragment> <li>First item</li> <li>Second item</li> <li>Third item</li> </react.fragment> );</code>

로그인 후 복사

포털 :이를 통해 어린이를 다른 DOM 하위 트리로 렌더링 할 수 있습니다. 예를 들어:

 <code class="javascript">return ReactDOM.createPortal( <div>This is rendered in a different part of the DOM</div>, document.getElementById('modal-root') );</code>

로그인 후 복사

문자열 및 숫자 : 텍스트 노드로 렌더링됩니다. 예를 들어:
```
 <code class="javascript">return 'Hello, World!';</code>
```
로그인 후 복사
부울 또는 널 : 이들은 아무것도 렌더링하지 않습니다. 예를 들어:
```
 <code class="javascript">return null;</code>
```
로그인 후 복사

render() 메소드는 순수해야하므로 구성 요소 상태를 수정해서는 안되며 브라우저와 직접 상호 작용해서는 안됩니다. 부작용은 수명주기 방법이나 후크를 통해 관리해야합니다.

렌더 () 메소드는 기능 구성 요소가 어떻게 다릅니 까?

React의 기능 구성 요소는 클래스 구성 요소처럼 render() 메소드를 사용하지 않습니다. 대신, 함수 구성 요소는 클래스 구성 요소의 render() 메소드와 동일합니다. 그것들은 props 인수로 받아들이고 표시해야 할 내용을 설명하는 반응 요소를 반응하는 순수한 기능입니다.

기능 구성 요소의 예는 다음과 같습니다.

 <code class="javascript">import React from 'react'; function ExampleComponent(props) { return <div>Hello, {props.name}!</div>; } export default ExampleComponent;</code>

로그인 후 복사

주요 차이점은 다음과 같습니다.

구문 : 함수 구성 요소는 함수 구문을 사용하고 클래스 구성 요소는 클래스 구문을 사용합니다.
상태 및 수명주기 : 클래스 구성 요소는 수명주기 방법을 사용하고 this.state 함께 로컬 상태를 관리 할 수 있습니다. 후크를 도입하기 전에 기능 구성 요소는 로컬 상태를 관리하거나 수명주기 방법을 사용할 수 없었습니다. 후크 (React 16.8에 도입)를 사용하면 기능 구성 요소는 useState 및 useEffect 후크를 통해 상태 및 수명주기를 관리 할 수 있습니다.
성능 : 기능 구성 요소는 클래스 인스턴스의 오버 헤드를 피하기 때문에 특히 후크를 사용할 때 더 간결하고 잠재적으로 더 성능이있을 수 있습니다.

다음은 기능 구성 요소에서 후크를 사용하는 예입니다.

 <code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onclick="{()"> setCount(count 1)}>Click me</button> </div> ); } export default ExampleComponent;</code>

로그인 후 복사

수명주기 방법은 Render () 메소드 내에서 사용할 수 있습니까?

아니요, 수명주기 방법은 render() 메소드 내에 사용해서는 안됩니다. render() 방법은 순수하고 부작용이 없어야합니다. componentDidMount , componentDidUpdate 및 componentWillUnmount 와 같은 수명주기 방법은 부작용을 처리하도록 설계되었으며 render() 메소드 외부에서 사용해야합니다.

예를 들어, 구성 요소가 마운트 할 때 데이터를 가져 오려면 클래스 구성 요소에서 componentDidMount 사용합니다.

 <code class="javascript">import React, { Component } from 'react'; class ExampleComponent extends Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { // Fetch data here fetch('/api/data') .then(response => response.json()) .then(data => this.setState({ data })); } render() { return ( <div> {this.state.data ? ( <div>Data: {this.state.data}</div> ) : ( <div>Loading...</div> )} </div> ); } } export default ExampleComponent;</code>

로그인 후 복사

함수 구성 요소에서는 useEffect 후크를 사용하여 동일한 결과를 달성합니다.

 <code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [data, setData] = useState(null); useEffect(() => { // Fetch data here fetch('/api/data') .then(response => response.json()) .then(data => setData(data)); }, []); // Empty dependency array means this effect runs once on mount return ( <div> {data ? <div>Data: {data}</div> : <div>Loading...</div>} </div> ); } export default ExampleComponent;</code>

로그인 후 복사

두 경우 모두 실제 데이터 페치 로직은 순도를 유지하고 불필요한 재 렌즈를 방지하기 위해 render() 방법을 벗어납니다.

위 내용은 React 클래스 구성 요소의 Render () 메소드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!