1. 最小化原则
  2. 不要重复
  3. 有些数据可以根据已有的state值求出
  4. 使用多个state变量

App state分析

  • 文件列表 （Files）
  • 搜索后的文件列表 （searchFiles） =》 可以依赖 Files 筛选
  • 未保存的文件列表 （unsavedFiles） =》 unsavedFileIDs [‘2’]
  • 已经打开的文件列表 （openedFiles） => openedFilesIDs [‘1’,’2’]
  • 当前被选中的文件 （activeFile） => activeFileID ‘1’

函数触发

  1. <FileList
  2.   files={files}
  3.   onFileClick={fileClick}   //直接写函数名即可， 参数自动传输
  4.   onFileDelete={(id)=>{console.log(id)}}
  5.   onSaveEdit={(id, value)=>{handleEditItem(id, value)}}
  6. />
  9. const fileClick = (id) => {
  10.     // 设置 激活的文件id
  11.     setActiveFileId(id)
  12.     // openids
  13.     if (!opendFileIds.includes(id)) setOpendFileIds([...opendFileIds, id])
  15.   }