reactの純コンポーネントと無状態コンポーネント

1.1ステータスコンポーネントなし
ステータスレスコンポーネントは、Componentを継承するライフサイクル関数を減らすことで、パフォーマンス最適化の効果を達成します.本質的に,無状態コンポーネントは単純なrender関数であるため,無状態コンポーネントの欠点も明らかである.shouldComponentUpdateライフサイクル関数がないため、stateが更新されるたびにrender関数が再描画されます.
原則として、1つのコンポーネントがrender関数のみを持つ場合、無状態コンポーネントとしてカプセル化することができるが、ListViewコンポーネントのrenderRow関数の内部に使用するのが好ましいと思う.ListViewコンポーネントのデータを操作するたびにrenderRow関数を呼び出すことは避けられないため、この場合、無状態コンポーネントの無ライフサイクルの特性は、適切に有効に表示されます.このときrenderRowの中のコンポーネントを分解するかどうかは効果的に同じですが、コンポーネントの分割は結合を低減し、これらのユニットを分離して独立したテストを行うのに役立ちます.

'use strict';
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    ListView,
    TouchableOpacity,
} from 'react-native';

const defaultSource = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
const testData = [{uername:'   ',useid:'w1258536653',remark:'        '},
    {uername:'   ',useid:'1258012580',remark:''},
    {uername:'  ',useid:'3215532155',remark:'    '},
    {uername:'  ',useid:'1008610086',remark:'   '}];

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: defaultSource,
        };
        this.listData = [];
    }

    componentDidMount() {
        this.listData = JSON.parse(JSON.stringify(testData));
        this.setState({
            dataSource: defaultSource.cloneWithRows(testData),
        });
    }

    updateItem = (index) => {
        if (this.listData[index].username == '  ') {
            return;
        }
        this.listData[index].username = '  ';
        this.setState({
            dataSource: defaultSource.cloneWithRows(this.listData),
        });
    } 

    renderRow = (rowData,i,j) => {
        console.log('renderRow',rowData.uername);
        return (
            
        )
    }

    render() {
        return (
            
                
            
        )
    }
}

const SubItem = ({rowData,index,updateItem,}) => {
    console.log('SubItem.render',rowData.uername);
    return (
        
            updateItem(index)} style={styles.updataBtn}>
                {rowData.uername||''}
                {'    '}
            
            {rowData.useid||''}
            {rowData.remark||'    '}
        
    );
}

const styles = StyleSheet.create({
    itemStyle: {
        paddingHorizontal: 10,
        paddingVertical: 15,
        backgroundColor: '#fff',
        marginBottom: 5,
    },
    baseText: {
        fontSize: 14,
        color: '#000',
    },
    updataBtn: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 5,
        backgroundColor: '#58A0FF',
    }
});

1.2 PureComponent
純粋なコンポーネントは、shouldComponentUpdateライフサイクル関数を制御し、render呼び出し回数を減らすことでパフォーマンス損失を低減します.これはComponentに比べて、stateの変化を手動で判断する煩雑な操作を減らすが、このコンポーネントにも一定の欠陥がある.浅い比較しかできないため、簡単に言えばpropsとstateのメモリアドレスのみを比較し、メモリアドレスが同じであればshouldComponentUpdateライフサイクルはfalseに戻る.PureComponentの使用シーンは、入力ボックス、switchスイッチなどのUIコンポーネントを使用してPureComponentコンポーネントをカプセル化するなど、ローカルデータが変化するシーンである必要があります.PureComponentでは、データ操作がサードパーティ製のコンポーネントであるImmutableと組み合わせて使用することが望ましい.Immutableは、Immutableがデータの不変性を保証するため、npmを使用してプラグインをインストールする必要がある.

'use strict';
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            accountNum: '',
            initPassword: '',
            userName: '',
        };
    }

    componentDidMount() {
    }

    onChangeText = (text, label) => {
        this.setState({[label]:text});
    }

    render() {
        return (
            
                
                
                
            
        )
    }
}

class InputItem extends React.PureComponent {
    render() {
        let {label,holder,itemValue,handleChangeText,keyboardType} = this.props;
        console.log('renderInputItem',itemValue);
        return (
            
                {label}
                handleChangeText(text,itemValue)}
                    numberOfLines={1}/>
            
        )
    }
}

const styles = StyleSheet.create({
    inputItemContainer: {
        backgroundColor: '#fff',
        paddingHorizontal: 10,
        paddingVertical: 14,
        marginBottom: 5,
        flexDirection: 'row',
        alignItems: 'center'
    },
    customerInput: {
        flex: 1,
        minHeight: 25,
        paddingHorizontal: 10,
        paddingVertical: 0,
        textAlign: 'right',
        fontSize: 14,
        color: '#333',
    },
});

個人理解:無状態コンポーネントとはライフサイクルのないコンポーネント(矢印関数return形式)である.純粋なコンポーネントはライフサイクルがあるがpropsを受け入れるだけで純粋なプレゼンテーションコンポーネントとして論理判断処理をしないコンポーネント(一般的によく見られるlistコンポーネント)