6.2 善用React

React的UI显示都是由数据驱动UI，所以当需要改变UI的显示时，应该改变的是组件的state，而不应该直接操作DOM，这跟传统的JQuery是很不一样的。

把需要根据数据显示的部分抽离成一个函数

下边的例子就是一个根据数据显示的内容，把需要按照数据控制显示的内容放在函数里。

class MyClass extends Component {
    state={
        showContent: false
    }
    //把需要控制显示的内容剥离开到函数
    renderContent() {
        if(this.state.showContent){
            return <Text>这是内容</Text>
        }
    }
    render() {
        return (<View>
            {this.renderContent()}
        </View>);
    }
}

如何通过渲染数组里的数据

有时可能需要渲染一个数组里的数据，比较好的办法就是把JSX放到一个数组里，然后再返回，以下是例子：

class MyClass extends Component {
    state={
        data: [1,2,3,4,5]
    }
    //这里渲染了一个数组的内容并进行返回。
    renderArray(data) {
        var jsx = [];
        data.map((item, index)=> {
            jsx.push(<Text>item</Text>)
        }
        return jsx;
    }
    render() {
        return (<View>
            {this.renderArray(this.state.data)}
        </View>);
    }
}

#