react18閲岄潰鐨勮绠楀睘鎬у拰浣跨敤useMemo鏉ユ彁鍗囩粍浠舵€ц兘鐨勬柟娉?/p>

璁＄畻灞炴€?/h3>

• 瀹炵幇鏁堟灉
  ; function FullName() { const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const fullName = firstName + " " + lastName; return ( <> <h1>fullname:{fullName}</h1> <label> First Name : <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} /> </label> <br /> <label> Last Name : <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} /> </label> </> ); } export default FullName;

  璁＄畻澶х殑鏂规硶缂撳瓨

  瀛愮粍浠朵細鍥犱负props鍜?code>state鐨勫彉鍖栬€岄噸鏂版覆鏌擄紝杩欏叾涓鏋滄湁寰堝ぇ璁＄畻閲忕殑鏂规硶鐨勮瘽锛屽氨浼氫弗閲嶆嫋鎱㈤〉闈㈠姞杞介€熷害銆傚儚涓嬮潰杩欑灏辨槸鍥犱负涓€涓棤鍏崇殑鏇存柊锛屽鑷磋绠椾竴浼氬湪鎵ц锛岃绠楅噺澶х殑璇濇€ц兘鎹熻€楀緢澶?br /> ; function TodoList({ todos, filter }) { const [newTodo, setNewTodo] = useState(""); const visibleTodos = getFilteredTodos(todos, filter); return ( <> <ul> {visibleTodos.map((todo) => { return <li>{todo.name}</li>; })} </ul> {newTodo} <br /> <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} /> </> ); } function getFilteredTodos(todos, filter) { console.log("馃殌 ~ getFilteredTodos ~ todos:", todos); return todos.filter((todo) => { return filter.call(null, todo); }); } export default TodoList;

  浼樺寲浠ｇ爜

  import { useState, useMemo } from "react";
  function TodoList({ todos, filter }) {
    const [newTodo, setNewTodo] = useState("");
    const visibleTodos = useMemo(
      () => getFilteredTodos(todos, filter),
      [todos, filter]
    );
    return (
      <>
        <ul>
          {visibleTodos.map((todo) => {
            return <li>{todo.name}</li>;
          })}
        </ul>
        {newTodo}
        <br />
        <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
      </>
    );
  }
  
  function getFilteredTodos(todos, filter) {
    console.log("馃殌 ~ getFilteredTodos ~ todos:", todos);
    return todos.filter((todo) => {
      return filter.call(null, todo);
    });
  }
  export default TodoList;