在 React 中使用钩子处理大量表单字段

Question

最近我玩了 React 钩子来处理从数组迭代的大量表单字段。我的目标是防止在未更改的字段组件上进行不必要的重新渲染。我用这段代码实现了它，但仍然有一些问题悬而未决：import React, { useState, useCallback, useRef, useEffect } from 'react';export default function Multipleform() {  // use useRef to prevent re-render of component due to state change  // create empty array with length of n  let data = useRef([...Array(5000).fill('')]);  let [reloader, setReloader] = useState(0);  // wrap handler with useCallback to keep its reference  // so React.memo will not consider it change overtime  const handler = useCallback((e, i) => {    // change state to rerender component, so i can see changes in ref    setReloader((val) => val + 1);    data.current[i] = e.target.value;  }, []);  return (    <div>      <h1>Form</h1>      {/* to log current state */}      <button onClick={() => console.log(data.current)}>log state</button>      {/* just print string of array to see state (ref value) changes  */}      <p>{data.current.filter(Boolean).toString()}</p>      {data.current.map((x, i) => {        return (          <MemoizedField data={x} key={i} handler={(e) => handler(e, i)} />        );      })}    </div>  );}const MemoizedField = React.memo(  ({ data, handler }) => {    useCountRenders();    return <input value={data} onChange={handler} />;  },  // 1. why should i put this, if React.memo itself will prevent re-render if no props changed?  (prev, next) => prev.data === next.data);// custom hooks to see re renders count of certain componentexport const useCountRenders = () => {  const renders = useRef(0);  useEffect(() => console.log('renders: ', renders.current++));};同样在评论中，我为什么要把上一个和下一个比较，如果React.memo本身会阻止重新渲染，如果没有道具改变？我从上面对钩子用法的理解中是否有误解？代码是否足够好，或者我可以改进它吗？谢谢

Answer 1

我认为休息一切看起来都很好。这里似乎有问题

 <MemoizedField data={x} key={i} handler={(e) => handler(e, i)} />

您应该直接使用处理程序，否则使用回调不会产生任何影响。每次渲染时都会创建函数。

<MemoizedField data={x} key={i} handler={handler} />