React의 컴포넌트 렌더링에 대한 자세한 설명

이번에는 React에서 컴포넌트 렌더링을 사용하는 방법에 대해 자세히 설명하겠습니다. React에서 컴포넌트 렌더링을 사용할 때 주의사항은 무엇인가요?

컴포넌트 렌더링 - 조건부 렌더링(동적 컴포넌트)

로그인 상태 등 컴포넌트가 동적으로 렌더링되는 경우가 많으며, 로그인하지 않으면 로그인 상태가 표시됩니다.

import React from 'react'
let Login = (props) => {
    return <input type="button" value="login" onClick={props.click}/>;
}
let Logout = (props) => {
    return <input type="button" value="logout" onClick={props.click}/>;
}
export default class CP extends React.Component{
    state = {
        status: 0
    }
    login(){
        this.setState({status: 1})
    }
    logout(){
        this.setState({status: 0})
    }
    render(){
        let button = null;
        if(this.state.status == 0){
            button = <Login click={this.login.bind(this)}/>
        } else {
            button = <Logout click={this.logout.bind(this)} />
        }
        return <p>{button}</p>
    }
}

Effect Preview

Component 렌더링 - 목록 렌더링

React에는 지침이 없으므로 목록을 렌더링할 때 배열을 사용해야 합니다.

목록 렌더링 - 간단한 구현

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    let lis = [<li key="Javascript">Javascript</li>, <li key="Vue">Vue</li>, <li key="React">React</li>]
    return (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
ReactDOM.render(
    <Component1 />
    document.getElementById('app')
)

list 렌더링 - 루프 for

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    let data = ['Javascript', 'Vue', 'React']
    let lis = [];
    for(let frm of frms){
        lis.push(<li key={frm}>{frm}</li>)
    }
    return (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
ReactDOM.render(
    <Component1 />
    document.getElementById('app')
)

list 렌더링 - 루프 맵

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    let data = ['Javascript', 'Vue', 'React']
    let lis = data.map((frm) => {
        return <li key={frm}>{frm}</li>
    });
    return (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
ReactDOM.render(
    <Component1 />
    document.getElementById('app')
)

list 렌더링 - 객체 배열

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component {
    constructor(props){
        super(props)
    }
    static defaultProps = {
        students: [
            {id: 1, name: 'Tom', age: 18, gender: 1}, 
            {id: 2, name: 'Sam', age: 22, gender: 1}, 
            {id: 3, name: 'Lucy', age: 20, gender: 0}
        ]
    }
    getKeys(item = {}){
        return Object.keys(item)
    }
    render(){
        return (
            <table>
                <thead>
                    <tr>
                        {
                            this.getKeys(this.props.students[0]).map((key) => {
                                return <th key={key}>{key}</th>
                            })
                        }
                    </tr>
                </thead>
                <tbody>
                    {
                        this.props.students.map((obj) => {
                            return (
                                <tr key={obj.id}>
                                    {
                                        this.getKeys(obj).map((key, idx) => {
                                            return <td key={key + idx}>{obj[key]}</td>
                                        })
                                    }
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        )
    }
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)

list 렌더링 - 키(Keys)

React 때문에 프로세스입니다. 가상 DOM에서 실제 DOM까지, DOM 자체는 객체이므로 기본적으로 고유 식별자가 없으므로 수동으로 지정해야 합니다.

키는 React가 어떤 항목이 수정, 추가 또는 제거되었는지 식별하는 데 도움이 됩니다. 배열의 각 요소는 고유하고 변경할 수 없는 키로 식별되어야 합니다.

키는 목록 렌더링에 사용되며 형제 요소 간에 고유해야 합니다.

컴포넌트 렌더링 - 컴포넌트 하위 노드

컴포넌트를 DOM 노드라고 부르기 때문에 컴포넌트에는 하위 노드가 포함될 수 있습니다. React는 this.props.children을 통해 구성 요소의 하위 노드를 얻습니다. 일반적으로 this.props.children은 다음과 같은 상황을 갖습니다this.props.children 来获取，通常this.props.children会有以下几种情况

1. 如果当前组件没有子节点，它就是 undefined

2. 如果有一个子节点，数据类型是 object

3. 如果有多个子节点，数据类型就是 array

为了解决这种数据类型不一致导致在使用的过程中要不断判断的情况，React 提供了一个方法Reacth.Children

1. 현재 구성요소에 하위 노드가 없으면 정의되지 않습니다

2. 하위 노드가 있으면 데이터 유형

   은 object

3. 자식 노드가 여러 개 있는 경우 데이터 유형은 array

In입니다. 이러한 데이터 유형 불일치를 해결하기 위해 React는 이 속성을 처리하기 위한 Reactth.Children 메서드를 제공합니다.

var Component1 = React.createClass({
    render: function(){
        return (
            <p>                        
                {
                    React.Children.map(this.props.children, function(childNode){
                        return <li>{childNode}</li>
                    })
                }
            </p>
        );
    }
})
ReactDOM.render(
    <Component1>
        <span>Tom</span>
        <span>Sam</span>
    </Component1>, document.getElementById('p1'));

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

프런트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명🎜🎜🎜🎜🎜PromiseA+🎜🎜🎜 구현 단계에 대한 자세한 설명

위 내용은 React의 컴포넌트 렌더링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!