react 无状态组件与纯组件（pureComponent）

无状态组件与纯组件（pureComponent）

1.1 无状态组件

无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。从本质上来说，无状态组件就是一个单纯的render函数，所以无状态组件的缺点也是显而易见的。因为它没有shouldComponentUpdate生命周期函数，所以每次state更新，它都会重新绘制render函数。

原则上，只要一个组件只具有render函数时，都可以封装成无状态组件，但是我认为其较佳的使用场景应该是使用在ListView组件的renderRow函数内部，因为每次对ListView组件的数据进行操作，都会不可避免的调用renderRow函数，而这时无状态组件无生命周期的特性恰好能有效的显示出来。虽然此时是否将renderRow里面的组件拆分出来在效果上都是一样的，但是组件的拆分有利于降低耦合，也有利于隔离这些单元进行独立测试。

无状态组件示例：

// 注意:props属性全部写在'{}'里面，也可以只传入‘props’,
// 这里就不用写‘render’函数了
const SubItem = ({rowData,index,updateItem}) => {
    console.log('SubItem.render',rowData.uername);
    return (
        <View style={styles.itemStyle}>
            <TouchableOpacity onPress={()=>updateItem(index)} style={styles.updataBtn}>
                <Text style={styles.baseText}>{rowData.uername||''}</Text>
                <Text style={{fontSize:12,color:'#fff',paddingLeft:20}}>{'点我修改'}</Text>
            </TouchableOpacity>
            <Text style={styles.baseText}>{rowData.useid||''}</Text>
            <Text style={styles.baseText}>{rowData.remark||'暂无备注'}</Text>
        </View>
    );
}

完整的示例代码：

'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 (
            <SubItem rowData={rowData} updateItem={this.updateItem} index={j}/>
        )
    }

    render() {
        return (
            <View style={{flex:1,backgroundColor:"#faf7f7"}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}/>
            </View>
        )
    }
}

const SubItem = ({rowData,index,updateItem,}) => {
    console.log('SubItem.render',rowData.uername);
    return (
        <View style={styles.itemStyle}>
            <TouchableOpacity onPress={()=>updateItem(index)} style={styles.updataBtn}>
                <Text style={styles.baseText}>{rowData.uername||''}</Text>
                <Text style={{fontSize:12,color:'#fff',paddingLeft:20}}>{'点我修改'}</Text>
            </TouchableOpacity>
            <Text style={styles.baseText}>{rowData.useid||''}</Text>
            <Text style={styles.baseText}>{rowData.remark||'暂无备注'}</Text>
        </View>
    );
}

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',
    }
});

运行效果图如下：

点击任意一项的“点我修改”按钮，通过下图可以看出，renderRow重绘了四次，并且SubItem也重新绘制了4次。但是因为SubItem为无状态组件，因此减少了声明周期函数的消耗。

上文也提到了，虽然此时是否将renderRow里面的组件拆分出来在效果上都是一样的，但是组件的拆分有利于降低耦合，也有利于隔离这些单元进行独立测试，因此组件的拆分对于整个软件开发的进行还是有利的。

1.2 PureComponent

纯组件是通过控制shouldComponentUpdate生命周期函数，减少render调用次数来减少性能损耗的。这相对于Component来说，减少了手动判断state变化的繁琐操作，但该组件也具有一定的缺陷，因为它只能进行一层浅比较，简单来说，它只比较props和state的内存地址，如果内存地址相同，则shouldComponentUpdate生命周期就返回false。PureComponent的使用场景应该是局部数据发生改变的场景，比如带有输入框、switch开关等的UI组件就可以使用PureComponent组件封装。PureComponent中如果有数据操作最好配合一个第三方组件——Immutable一起使用，Immutable需要使用npm安装该插件才可以使用，因为Immutable可以保证数据的不变性。

PureComponent示例： 以下将输入框组件使用PureComponent进行了封装。

'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 (
            <View style={{flex:1,backgroundColor:"#faf7f7"}}>
                <InputItem label={'账号:'} holder={'请输入账号'} itemValue={this.state.accountNum} handleChangeText={this.onChangeText} keyboardType={'default'}/>
                <InputItem label={'初始密码:'} holder={'请输入初始密码'} itemValue={this.state.initPassword} handleChangeText={this.onChangeText} keyboardType={'numeric'}/>
                <InputItem label={'姓名:'} holder={'请输入姓名'} itemValue={this.state.userName} handleChangeText={this.onChangeText} keyboardType={'default'}/>
            </View>
        )
    }
}

class InputItem extends React.PureComponent {
    render() {
        let {label,holder,itemValue,handleChangeText,keyboardType} = this.props;
        console.log('renderInputItem',itemValue);
        return (
            <View style={styles.inputItemContainer}>
                <Text style={{fontSize:14,color:'#000'}}>{label}</Text>
                <TextInput
                    style={styles.customerInput}
                    underlineColorAndroid={"transparent"}
                    placeholderTextColor={"#cdcdcd"}
                    placeholder={holder}
                    defaultValue={itemValue}
                    keyboardType={keyboardType}
                    onChangeText={(text)=>handleChangeText(text,itemValue)}
                    numberOfLines={1}/>
            </View>
        )
    }
}

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',
    },
});

我们都对在输入框中输入内容，InputItem也没有进行重绘。运行效果图如下：

控制台打印如下：

这里如果我们不使用PureComponent，则会多次调用render函数，造成无意义的资源浪费。如果我们封装的是其它的组件，比如Switch，则也只有state被修改的那一项被修改，感兴趣的童鞋可以动手自己试一下。

总结：

1. 一般来说，如果一个组件只有render函数，则该组件可以封装成无状态组件。
2. 在renderRow函数中比较适合使用无状态组件。
3. 在大部分的时候都可以使用pureComponent组件来替换Component。