在 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 component

export const useCountRenders = () => {

  const renders = useRef(0);

  useEffect(() => console.log('renders: ', renders.current++));

};

1. 同样在评论中，我为什么要把上一个和下一个比较，如果React.memo本身会阻止重新渲染，如果没有道具改变？

2. 我从上面对钩子用法的理解中是否有误解？

3. 代码是否足够好，或者我可以改进它吗？

谢谢

Answer 1

我认为休息一切看起来都很好。这里似乎有问题&nbsp;<MemoizedField&nbsp;data={x}&nbsp;key={i}&nbsp;handler={(e)&nbsp;=>&nbsp;handler(e,&nbsp;i)}&nbsp;/>您应该直接使用处理程序，否则使用回调不会产生任何影响。每次渲染时都会创建函数。<MemoizedField&nbsp;data={x}&nbsp;key={i}&nbsp;handler={handler}&nbsp;/>