react状态管理

    import React, { useState, useMemo } from "react";
      /* 搜索框案例  searchKey-搜索关键字  
           data-搜索结果数据   
           filtered- 筛选搜索结果处理数据
        */
      function FilterList({ data }) {
        const [searchKey, setSearchKey] = useState("");
        // 每当 searchKey 或者 data 变化的时候，重新计算最终结果
        const filtered = useMemo(() => {
          return data.filter((item) =>
            item.title.toLowerCase().includes(searchKey.toLowerCase())
          );
        }, [searchKey, data]);

        return (
          <div className="08-filter-list">
            <h2>Movies</h2>
            <input
              value={searchKey}
              placeholder="Search..."
              onChange={(evt) => setSearchKey(evt.target.value)}
            />
            <ul style={{ marginTop: 20 }}>
              {filtered.map((item) => (
                <li key={item.id}>{item.title}</li>
              ))}
            </ul>
          </div>
        );
      }

      /* 复杂状态处理：如何保证状态一致性
         原则1:保证状态最小化
         原则2:避免中间状态，确保唯一数据源
         所以我们在定义一个新的状态之前，都要再三拷问自己：
         这个状态是必须的吗？是否能通过计算得到呢？在得到肯定的回答后，
         我们再去定义新的状态，就能避免大部分多余的状态定义问题了，也就能在简化状态管理的同时，保证状态的一致性
      */