Day 20 To Do List - 封装

第 20 天～

走到了三分之二了～！！！

好激动阿！！

再接再厉～ 加油！

昨天把 To Do List 的逻辑全都完成了，

我们今天来 聊聊 关於 compound component (合成元件)

当我们在开发时，总会碰上几个状况：

• 有相同地方，重复性高
• 不同逻辑的干扰
• 结构太多难以阅读

在这种时候，我们会希望能把这些独立出来，封装成一个 component ，

以 To Do List 为例的话，我们会拆分成哪些 component 呢？

功能按钮

Add & Search & Complete All 这三个按钮，不管是功能还是外型都是一样的，

那我们就可以把它封装成 FeatureButton，

功能 ：

• onPress 按下去事件
• text 显示按钮文字

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#d9d9d9',
    borderColor: '#7c7c7c',
    borderWidth: 1,
    padding: 5,
  },
  text: {
    textAlign: 'center',
    color: '#555',
  },
});

function FeatureButton({ text, onPress, ...etc }) {
  return (
    <TouchableOpacity style={styles.root} onPress={onPress} {...etc}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
}

因为内部没有独立逻辑，我们可以只需要使用 functional component 就好，

藉由 props 把所需的资讯传入，

列表 item

在 FlatList 的 renderItem 部分，

我们也可以把它封装成一个 component 来增加阅读性，

因为封装起来，我们有些地方需要做改变，

• 传入目前是奇数还是偶数
• 传入目前是否是结束状态

const styles = StyleSheet.create({
  root: {
    paddingVertical: 17,
    flexDirection: 'row',
  },
  odd: {
    backgroundColor: '#eee',
  },
  even: {
    backgroundColor: '#f9f9f9',
  },
  doneBackground: {
    backgroundColor: '#888',
  },
  text: {
    marginLeft: 10,
  },
  doneText: {
    color: '#fff',
    textDecorationLine: 'line-through',
  },
  tickArea: {
    marginHorizontal: 10,
    transform: [{ rotate: '45deg' }],
    height: 14,
    width: 8,
  },
  tick: {
    borderBottomColor: '#fff',
    borderRightColor: '#fff',
    borderBottomWidth: 1,
    borderRightWidth: 1,
  },
});

function ToDoItem({ text, isDone, isEven, onPress }) {
  const backgroundColorStyle = isEven ? styles.even : styles.odd;
  return (
    <TouchableOpacity
      style={[
        styles.root,
        backgroundColorStyle,
        isDone && styles.doneBackground,
      ]}
      onPress={onPress}>
      <View style={[styles.tickArea, isDone && styles.tick]}></View>
      <Text style={[styles.text, isDone && styles.doneText]}>{text}</Text>
    </TouchableOpacity>
  );
}

那外部使用就是这样：

<FlatList
  data={list.filter((item) => item.text.includes(filterKey))}
  renderItem={({ item, index, separators }) => {
    const isEven = index % 2 === 0;
    const isDone = item.status === 'done';
    return (
      <ToDoItem
        isEven={isEven}
        isDone={isDone}
        text={item.text}
        onPress={this.changeItemStatus(item.id)}
      />
    );
  }}
  keyExtractor={(item) => item.id}
/>