ReactNative进阶（四十）：应用 ListView 实现分组列表_rn faltlist 分组列表(1)

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

只更新渲染数据变化的那一行 ，rowHasChanged方法会告诉ListView组件是否需要重新渲染当前那一行。

选择渲染的频率，默认情况下每一个event-loop(事件循环)只会渲染一行(可以同pageSize自定义属性设置)。这样可以把大的工作量进行分割，提供整体渲染的性能。

四、ListView Demo

/\*\*
 \* Sample React Native App
 \* https://github.com/facebook/react-native
 \* @flow
 \*/

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  TouchableOpacity,
  AlertIOS,
} from 'react-native';

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
// 引入数据文件
var models = require("./Wine.json");

var listViewTest = React.createClass({

  /\*\*
   \* 生命周期,不可更改的属性在这里
   \* @returns {{}}
   \*/
  getDefaultProps() {
    return {}
  },
  /\*\*
   \* 生命周期,状态机在这里
   \* @returns {{}}
   \*/
  getInitialState() {
    // 创建数据源   rowHasChanged方法决定了ListView是否重新渲染当前这一行
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => {
        r1 !== r2
      }
    });
    return {
      // 数据源中的数据
      dataSource: ds.cloneWithRows(models)
    }
  },
  /\*\*
   \* 生命周期,复杂的操作在这里
   \*/
  componentDidMount() {

  },
  /\*\*
   \* 生命周期,渲染
   \* @returns {XML}
   \*/
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource} // 指定数据源
        renderRow={this.renderRow} // 渲染每一行
      />
    );
  },
  /\*\*
   \* ListView根据数据源的数据进行渲染
   \* @param rowData 每一项的数据
   \* @param sectionID 组号
   \* @param rowID 行号
   \* @param highlightRow
   \* @returns {XML}
   \*/
  renderRow(rowData, sectionID, rowID, highlightRow) {
    return (
      <TouchableOpacity 
        activeOpacity={0.7} 
        onPress={() => this.cellDidClick(rowID, rowData)}
      >
        <View style={styles.wineCell}>
          <Image style={styles.icon} source={{uri: rowData.image}}/>
          <View style={styles.titleContainer}>
            <Text style={styles.title}>{rowData.name}</Text>
            <Text style={styles.subTitle}>${rowData.money}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  },

  cellDidClick(rowID, rowData) {
    alert("点击了" + rowID + rowData.name);
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop: 20
  },
  wineCell: {
    flexDirection: "row",
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    paddingLeft: 10,
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: 'white'
  },
  icon: {
    width: 60,
    height: 60,
  },
  titleContainer: {
    flexDirection: "column",
    justifyContent: 'space-between'
  },
  title: {
    fontSize: 15,
    fontWeight: 'bold',
    width: width - 60,
    paddingLeft: 10,
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。



也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

### 面试准备

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。


知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。