一、计时器

1. 案例场景

计时器在很多网站中都有使用，以时分秒的格式展示当前时间，每秒刷新一次。

2. 案例展示

展示的时间将随着系统时间，每秒刷新一次。

3. 案例代码

import { useState, useEffect } from 'react';

export default function Clock() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    // 在组件加载时调用
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer); // 在组件卸载时调用
  }, []);
  return (
      <div>
        <h3>{time.toLocaleTimeString()}</h3>
      </div>
  );
}

4. 案例总结

(1) 使用 useState 设置状态，状态更新会触发页面更新；

(2) 使用 useEffect 模拟组件生命周期，在组件加载时开启计时器，在组件卸载时清除计时器。

二、tab 切换

1. 案例场景

实现一个 tab 页组件，可以点击 tab 标签切换展示的内容。

2. 案例展示

3. 案例代码

/** @jsxRuntime classic */
/** @jsx jsx */
import {jsx, css} from '@emotion/react';
import {useState} from 'react';

// const data = [
//   {id: '1', title: '首页', content: '这是首页内容'},
//   {id: '2', title: '军事', content: '这是军事内容'},
//   {id: '3', title: '新闻', content: '这是新闻内容'},
//   {id: '4', title: '电影', content: '这是电影内容'}
// ];

export default function Tab(props) {
  const styles = {
    li: css`
      list-style-type: none;
      margin: 0;
      padding: 0;
      flex: 1;
      text-align: center;
      line-height: 40px;
      background-color: black;
      color: white;
      font-size: 24px;

      &.active {
        background-color: red;
      }
    `,
    ul: css`
      width: 640px;
      margin: 100px auto 0;
      padding: 0;
      border: 1px solid red;
      display: flex;
    `,
    content: css`
      width: 640px;
      height: 400px;
      background-color: #cccccc;
      margin: 0 auto;
    `
  };
  const [data] = useState(props.data);
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
      <div>
        <ul css={css`${styles.ul}`}>
          {data.map((item, index) => <li className={index === selectedIndex ? 'active' : ''} onClick={() => setSelectedIndex(index)} key={item.id} css={css`${styles.li}`}>{item.title}</li>)}
        </ul>
        <div css={css`${styles.content}`}>
          {props.data[selectedIndex].content}
        </div>
      </div>
  );
}

4. 案例总结

(1) 组件布局：tab 页组件由标签区域和内容区域组成，标签区域使用 ul 列表，内容区域使用一个 div 标签。

(2) 使用 emotion 为组件添加样式。

(3) 组件状态：tab 页需要切换标签而切换显示内容，而 tab 页的数据存储在一个对象数组中，切换标签的同时要切换展示元素的下标，这个下标要为一个 state。

(4) 激活标签的样式，使用 emotion 进行样式定义，动态切换类名。

三、Todolist

1. 案例场景

以列表形式展示一个 Todolist，支持新增和删除功能，选中的记录添加删除线。

2. 案例展示

3. 案例代码

/** @jsxRuntime classic */
/** @jsx jsx */
import {jsx, css} from '@emotion/react';
import {useState} from 'react';
import {useImmer} from 'use-immer';

const componentStyles = {
  button: css`
      width: 80px;
      height: 30px;
      color: red;
      background-color: transparent;
      border-radius: 5px;
      margin-left: 20px;
      outline: none;
  `
};

const ListItem = function ({list, setList}) {
  const styles = {
    ul: css`
      margin: 0 auto;
      border: 1px solid gray;
      border-radius: 10px;
      width: 300px;
      padding: 20px;
      li {
        list-style-type: none;
        margin: 10px;
        display: flex;
        justify-content: space-between;
        span {
          flex: 1;
          &.delete {
            text-decoration-line: line-through;
          }
        }
      }
    `
  };
  return (
      <ul css={css`${styles.ul}`}>
        {list.map((item, index) => <li key={item.id}>
          <div>
            <input type="checkbox" checked={item.status === 1} onChange={() => setList(l => {
              l[index].status = l[index].status === 1 ? 0 : 1;
              return l;
            })} />
            <span className={item.status === 1 ? 'delete' : ''}>{item.name}</span>
          </div>
          <button css={componentStyles.button} onClick={() => setList(l => {
            l.splice(index, 1);
            return l;
          })}>删除</button>
        </li>)}
      </ul>
  );
};

export default function Todolist() {
  const styles = {
    header: css`
      width: 350px;
      background-color: #cccccc;
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
    `,
    footer: css`
      position: relative;
      margin: 0 auto;
      line-height: 30px;
      height: 80px;
      width: 350px;
      box-sizing: border-box;
      padding: 20px 10px 20px 10px;
      background-color: rgba(223, 224 ,224, .3);
      input {
        height: 24px;
        width: 220px;
        border-radius: 4px;
        outline: none;
        border: 1px solid silver;
      }
    `,
    button: css`
      width: 80px;
      height: 30px;
      color: red;
      background-color: transparent;
      border-radius: 5px;
      margin-left: 20px;
      outline: none;
    `
  };
  const [list, setList] = useImmer([
    { id: '0', name: '张三', status: 0 },
    { id: '1', name: '李四', status: 0 },
    { id: '2', name: '王五', status: 0 },
    { id: '3', name: '赵六', status: 0 }
  ]);
  const [inputVal, setInputVal] = useState('');
  return (
      <div>
        <header css={css`${styles.header}`}>React Todolist</header>
        <div css={css`${styles.footer}`}>
          <input type="text" placeholder="add todo" value={inputVal} onChange={(e) => setInputVal(e.target.value)} />
          <button css={css`${componentStyles.button}`} onClick={() => setList(l => {
            inputVal && l.push({ id: l.length + '', name: inputVal, status: 0 });
            return l;
          })}>添加</button>
        </div>
        <ListItem list={list} setList={setList} />
      </div>
  );
}