javascript - 在 React 类中缓存 DOM 值的好模式是什么

Question

多年来，我们团队发展的一种常见模式是在渲染后存储 DOM 尺寸，以便我们以后可以访问它们而对性能影响较小（例如 - 确定是否应该在滚动浏览大列表时渲染组件）。一个基本的例子是：

class List extends Component {
    construct(props){
        super(props)

        this.elements = {};
        this.heights = {};
    }

    render(){
        return <ol>
            {this.props.items.map((item,i)=>this.getItem(item,i))}
        </ol>;
    }

    getItem(item){
        return <li key={item.id} ref={(el)=>this.cacheElement(el, item.id)}>{item.name}</li>
    }

    cacheElement(el,id){
        this.elements[id] = findDOMNode(el);
    }

    componentDidUpdate(){
        this.items.forEach(item=>{
            //in real examples this will probably implement some sort 
            //of memoization to prevent overpolling over existing values
            this.heights[item.id] = elements[item.id].offsetHieght;
        })
    }
}

注意 - 我知道我在这里使用 refs 和存储 DOM 引用的方式并不理想，而且这里可能还有其他反模式 - 旨在使代码清晰

从历史上看，我们没有将其保存在 中的原因setState是因为我们不想因为后期渲染计算而强制重新渲染。然而，通过阅读，我了解到这种方法是一种反模式——特别是在外部存储数据setState可能无法很好地与过去几个月开始出现的异步渲染功能配合使用。

这些挑战是否有其他模式（需要缓存以供将来使用的渲染后值​​）？

标签： javascriptreactjs