markdown日记本项目分析与实现

项目概述

该项目为react练习demo，源代码点击此处，主要涉及内容

1. 组件props与组件样式className
2. 组件内传多个子节点问题
3. 通过ref使用真实dom
4. state状态变更渲染组件
5. props属性校验

以上为react中基础部分，项目设计图如下所示，具体项目展示可点此处

内容展示
点击编辑按钮后，右侧展示组件会变为内容编辑组件，这里可知需要一个boolean类型值，根据该值决定展示内容组件还是编辑内容组件
内容编辑

组件设计

首先编写组件样式，然后根据组件功能决定state结构

样式部分

根据设计图可将组件分为如下几个部分

1. app组件(即父组件)
   包含列表组件与右侧展示与编辑部分
2. 列表组件
   CreateBar与列表项ListItem
3. 展示组件与编辑组件

即一共6种组件

state数据结构

说起state这里简要阐述一下与props的区别

• state
  每个组件都有自己的state，它是一个动态的，通过setState(data,callback)可将data与原state 合并，使用该方法后组件会重新render达到更新渲染组件的目的
• props
  props仅为组件最初载入时传入的参数，载入后组件内容会根据state变化而再次render，此时state可能会作为props传入其他组件中导致其他组件再次渲染。

接下来设计markdown中state数据结构，根据最小组件state优化出最终state结构

1. CreateBar
   该组件仅需要点击事件函数对象createItem
2. ListItem
   该组件需要item中的title，time，selectItem函数对象
3. 展示组件部分
   item的title，content，按钮事件editItem与deleteItem
4. 编辑组件部分
   item的title，content，按钮事件saveItem与cancelItem

将所有state与事件函数统一放在app组件内，便于统一管理

组件state

• editing用于判断显示展示组件还是编辑组件
• selectedId用于事件内部操作items数组
• items数组存储所有日记记录

组件交互

父组件一共有6个事件函数

• selectItem(id)
  修改state中selectedId与editing的值
• saveItem(item)
  创建新日记：在items中添加新item(需创建新的uuid与time)
  修改旧日记：在items中找与到item.id相同的记录并覆盖title与content
• deleteItem(id)
  从items中删除对应id的item
• createItem()
  当前selectedId设为null，editing设为true
• editItem(id)
  修改item时依旧显示当前selectedItem同时editing改为编辑状态
• cancelItem()
  取消编辑状态editing:false