从0开始用hooks搭建一个事件待办的demo（二）

需求三：循环渲染数据列表+持久化存储

分析：

只需要做到两点就好了：

1.父组件渲染列表：一个map循环遍历数据列表来渲染子组件

2.持久化存储：用两个副作用钩子进行读和写，注意顺序先读后写

//app.js
import React, { useCallback, useState } from "react";
import "./App.css";
import Header from "./componens/Header";
import AddInput from "./componens/addInput";
import DataItem from './componens/dataItem'
function App() {
  const [isInputShow,setIsInputShow] = useState(false);
  const [dataList , setDataList] = useState([])
  const openInput = ()=>{
    setIsInputShow(!isInputShow)
  }
  //每次页面刷新将之前存储的数据拿到并展示
  useEffect(()=>{
    const todoData = JSON.parse (localStorage.getItem('todoData'||'[]'))
    //这里必须更改列表数据，否则列表datalist是初始化的空数组，不会被渲染显示在页面中
    setDataList(todoData)
  },[])
  //每当列表数据有新增或删除等操作，存储到本地
  useEffect(()=>{
    localStorage.setItem('todoData',JSON.stringify(dataList))
  },[dataList])

  const addItem =useCallback( (value)=>{
    const dataItem = {
      id:new Date().getTime(),
      content:value,
      isCompleted:false
    }
    const newDatas =  [...dataList,dataItem]
    setDataList(newDatas)  
  },[dataList])
  return (
    <div className="App">
      <Header openInput={openInput}></Header>
      <AddInput isInputShow={isInputShow} addItem={addItem}></AddInput>
      //只需要在这里添加ul，map遍历data数据的每一项用新的子组件DataItem渲染
      <ul>
        {
          dataList.map((item,index)=>{
            return(
              <DataItem data={item} key={index}></DataItem>          
            )
          })
        }
      </ul>

    </div>
  );
}

export default App;

分析：

创建一个新的子组件DataItem，提供给父组件循环渲染即可

//DataItem.js
import React from "react";
import "./index.scss";
function AddItem(props) {
  //解构拿到每一项数据
  const { data } = props;
  return (
    //当前项存在时进行渲染
    data && (
      <li className="item">
        <div className="input-checkbox">
          //选择框的checked取决于数据的isCompleted属性
          <input type="checkbox" checked={data.isCompleted} />
        </div>
        //文本的颜色也取决于数据的isCompleted属性
        <span style={{ color: data.isCompleted ? "grey" : "black" }}>
          {data.content}
        </span>

        <div>
          <button style={{backgroundColor: 'rgb(125, 193, 244)'}}>查看</button>
          <button style={{backgroundColor: 'rgb(238, 222, 47)'}}>编辑</button>
          <button style={{backgroundColor: 'rgb(230, 131, 131)'}}>删除</button>
        </div>
      </li>
    )
  );
}

export default AddItem;

只写功能哈，样式大家都会写的，短一点吧，容易看下去，下一节再写。。。