如何防止不必要的 React 组件重新渲染

import { usememo, usestate } from 'react';

    function page() {
      const [count, setcount] = usestate(0);
      const [items] = usestate(generateitems(300));

      const selecteditem = usememo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateitems(count) {
        const items = [];
        for (let i = 0; i < count; i++) {
          items.push({
            id: i,
            isselected: i === count - 1,
          });
        }
        return items;
      }

      return (
        <div classname="tutorial">
          <h1>count: {count}</h1>
          <h1>selected item: {selecteditem?.id}</h1>
          <button onclick={() => setcount(count + 1)}>increment</button>
        </div>
      );
    }

    export default page;

import react, { usestate, usecallback, memo } from 'react';

    const allcolors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledarray = [...array];
      for (let i = shuffledarray.length - 1; i > 0; i--) {
        const j = math.floor(math.random() * (i + 1));
        [shuffledarray[i], shuffledarray[j]] = [shuffledarray[j], shuffledarray[i]];
      }
      return shuffledarray;
    };

    const filter = memo(({ onchange }) => {
      console.log('filter rendered!');

      return (
        <input
          type='text'
          placeholder='filter colors...'
          onchange={(e) => onchange(e.target.value)}
        />
      );
    });

    function page() {
      const [colors, setcolors] = usestate(allcolors);
      console.log(colors[0])

      const handlefilter = usecallback((text) => {
        const filteredcolors = allcolors.filter((color) =>
          color.includes(text.tolowercase())
        );
        setcolors(filteredcolors);
      }, [colors]);


      return (
        <div classname='tutorial'>
        <div classname='align-center mb-2 flex'>
          <button onclick={() => setcolors(shuffle(allcolors))}>
            shuffle
          </button>
          <filter onchange={handlefilter} />
        </div>
        <ul>
          {colors.map((color) => (
            <li key={color}>{color}</li>
          ))}
        </ul>
      </div>
      );
    }

    export default page;

import React, { useRef, useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        ref={inputRef}
      />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}