React中ref存储含大量null的数组是否需重置？

你的三个疑问解答： #

• 1. 重置数组长度是否值得？
  完全值得。修改数组length属性是极轻量的操作，几乎不会产生性能损耗，但能彻底避免数组堆积无效null值的问题，后续操作时也不会因为数组长度和实际有效元素数量不符而踩坑。

• 2. 存储含大量null的数组是否是不良实践？
  是的。这种做法会导致数组长度和实际渲染元素数量脱节，容易引发索引越界、误访问null的bug，还会降低代码可读性——其他维护者看到长度100的数组却只有前几个有效元素时会产生困惑。虽然null占用内存极小，但没必要保留这类无效数据。

• 3. 更优的实现方式？
  你当前的方案能解决问题，但还有更简洁的思路：用以item.id为key的对象替代数组存储Ref。这样每次渲染时只会更新当前存在的元素Ref，被卸载的元素会通过Ref回调自动清理，无需依赖useEffect重置。

优化后的代码示例： #

const elementsRef = useRef({}); // 用对象替代数组存储元素Ref

const [matchingItems, setMatchingItems] = useState([]);

const dropDown = matchingItems.map((item) => {
    return (
        <div
            key={item.id}
            ref={el => {
                if (el) {
                    elementsRef.current[item.id] = el; // 元素挂载时存入Ref
                } else {
                    delete elementsRef.current[item.id]; // 元素卸载时移除对应Ref
                }
            }}
        >
            {item.value}
        </div>
    )
})

const handlePrefix = (event) => {
    setMatchingItems(trie.find(event.target.value));
};

return (
    <div>
        <input type="search" onChange={handlePrefix} />
        <div>{dropDown}</div>
    </div>
)

方案优势： #

• 无需额外useEffect监听状态变化，代码更简洁
• Ref对象仅保留当前渲染的有效元素，无无效null值
• 访问元素时直接通过elementsRef.current[目标item的id]，比索引访问更直观，不会出现索引错位问题

内容的提问来源于stack exchange，提问作者Brandon Taft