输入字段中的每次点击都会重新渲染数组

Question

我遇到的问题是，当我在标题字段中输入内容时，每个字母的预览数组都会重新呈现。不管怎样，每次打字时图像都会重新排列。我不知道问题是什么。 强调文字

  const [imagePreviews, setImagePreviews] = useState<Array<string>>([]);
  const [title, setTitle] = useState("");

  const willUpload = useCallback(
  async (e: React.ChangeEvent<HTMLInputElement>) => {
  try {
    let images: Array<string> = [];

    let files = e.target.files;
   
    for (let i = 0; i < files!!.length; i++) {
      images.push(URL.createObjectURL(files!![i]));
    }

    setImagePreviews(imagePreviews.concat(images));
  } catch (error) {
    console.log(error);
    }
   },
   [imagePreviews, uploadFiles]
 );


   return(
      ...
 
   <input
        onChange={(e) => setTitle(e.target.value)}
        type="text"
        value={title}
        placeholder="Title"
        ...
    >
   </input>
   <input
      ...
      type="file"
      multiple
      onChange={(e) => willUpload(e)}
   ></input>
     ...
     {imagePreviews.length > 0 && (
     <>
      <p className="font-semibold text-2xl text-center">Preview</p>
      <div className="grid grid-flow-row-dense grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-2 w-full p-4">
        {imagePreviews.map((preview, index) => (
          <div>...</div> 
         ))}
     </div>
    </>
    )

Answer 1

没问题，React 就是这样工作的。它会根据状态变化重新渲染。

如果您想防止重新渲染，可以使用的技术很少。

• 如果视图不需要该状态，则将状态分离到不同的状态 组件
• 使用React.memo
• 使用 React.useMemo