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>
    }
}

エフェクトプレビュー

コンポーネント。レンダリング - リストレンダリング

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')
)

リストレンダリング - ループ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')
)

リストレンダリング - ループマップ

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')
)

リストレンダリング - オブジェクト配列

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')
)

リストレンダリング - キー(Keys)

Reactのための処理です仮想 DOM から実際の DOM への変換であり、DOM 自体はオブジェクトであるため、デフォルトでは一意の識別子を持たないため、手動で指定する必要があります。

キーは、どの項目が変更、追加、または削除されたかを React が識別するのに役立ちます。配列内の各要素は、一意で不変のキーによって識別される必要があります。

キーはリストのレンダリングで使用され、兄弟要素間で一意である必要があります。

コンポーネントのレンダリング - コンポーネントの子ノード

コンポーネントは DOM ノードとして呼び出されるため、コンポーネントには子ノードを含めることができます。 React は this.props.children を通じてコン​​ポーネントの子ノードを取得します。通常、this.props.children には次のような状況があります

1. 現在のコンポーネントに子ノードがない場合は未定義ですthis.props.children 来获取，通常this.props.children会有以下几种情况

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

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

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

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

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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドのソートアルゴリズム例の詳細な説明

🎜🎜🎜PromiseA+の実装手順の詳細な説明🎜🎜🎜

以上がReactにおけるコンポーネントレンダリングの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。