React-hook练手小项目--待办事件

React-hook练手小项目–待办事件

一、学到了什么？

写代码前的规划
useState()/useRef()/useCallback()/useEffect()的使用
父子组件传值
自定义组件双标签的写法
使用useEffect()的先后顺序
条件渲染

二、具体写法

写代码前考虑可以分为几个模块，分个组件，组件之间的关系，如何排版

useState

1 2	// 定义变量，改变变量的方法，初始值 const [todoList, setTodoList] = useState([])

useRef

// 定义
const inputRef = useRef();
<input ref={inputRef} type="text"></input>
// 获取值
inputRef.current.value

useEffect

// 在页面加载完成的时候以及数据更新的时候,触发执行
// 第二个参数，当依赖变化的时候执行
useEffect(() => {
    sessionStorage.setItem('todoData', JSON.stringify(todoList))
}, [todoList])

useCallback

// useCallback缓存todoList，只有todlList发生变化再次渲染，减少不必要的渲染问题
const openCheckModal = useCallback(id => {
    setCurrentData(() => todoList.filter(item => item.id === id)[0])
    setShowCheckModal(true)
}, [todoList])

父子通讯

// 父：
// isInputShow属性传给子组件
<AddInput 
    isInputShow={ isInputShow }
    addItem={addItem}
    />
// 定义方法
const addItem = () => {}
// 子：
// 子组件使用了addItem方法并传递给父组件
const { isInputShow, addItem } = props,

双标签的写法

// 双标签封装通过this.props.children来获取标签内的元素，主要目的就是能嵌套标签
// Modal 基础组件
function Modal (props) {
  const { isShowModal, modalTitle, children } = props
  return (
    <>
      {
        isShowModal
        ?
          (
            <div className="modal">
              <div className="inner">
                <div className="m-header">{modalTitle}</div>
                <div className="content-wrapper">
                  {children}
                </div>
              </div>
            </div>
          )
        :
        ""
      }
    </>
  )
}
// CheckModal包装组件
function CheckModal (props) {
  const { isShowCheckModal, data, closeModal } = props
  return (
    <Modal
      isShowModal={isShowCheckModal}
      modalTitle="查看事件"
    >
      <p className="topic">时间：{formatDateTime(data.id)}</p>
      <p className="topic">内容：{data.content}</p>
      <p className="topic">时间：{data.completed ? '已完成' : '未完成'}</p>
      <button className='btn btn-primary confirm-btn' onClick={closeModal}>确定</button>
    </Modal>
  )
}