Question

我有分层递归数据结构。它是一个命名项目列表，每个项目都有自己的项目子列表。它看起来像这样：

const items = [
    {
        name: 'item1',
        items: [
            {name: 'item2'},
            {name: 'item3'},
            {name: 'item4', items: [
                {
                    name: 'item5'
                }
            ]},
        ]
    },
    {
        name: 'item6'
    }
]

我希望在带有嵌套子列表的无序列表中显示它。此外，我需要能够将某些项目标记为突出显示并取消所有项目的高亮显示。由于第二个要求，有关突出显示项目的信息必须存在于顶级组件中。

我天真的实现如下：

class App extends Component {
    constructor() {
        super(...arguments)
        this.state = {
            items: items,
            highlightedItemsNames: {},
        }
        this.handleHighligtItem = (item) => {
            this.setState({highlightedItemsNames: {
                ...this.state.highlightedItemsNames, [item.name]: true
            }})
        }
        this.handleDehighlightAllItems = () => {
            this.setState({highlightedItemsNames: {}})
        }
    }

    render() {
        return <div>
            <button onClick={this.handleDehighlightAllItems}>dehighlight</button>
            <List
                items={this.state.items}
                highlightedItemsNames={this.state.highlightedItemsNames}
                onHighlight={this.handleHighligtItem}
            />
        </div>
    }
}


function List(props) {
    return <ul>
        {props.items.map(item => <li key={item.name}>
            <Item
                item={item}
                highlighted={props.highlightedItemsNames[item.name]}
                highlightedItemsNames={props.highlightedItemsNames}
                onHighlight={props.onHighlight}
            />
        </li>)}
    </ul>
}


function Item(props) {
    let className = "item"
    if (props.highlighted) {
        className += '-highlighted'
    }
    console.log('renders item', props.item.name)
    return <div>
        <span className={className}>{props.item.name}</span>
        <button onClick={() => props.onHighlight(props.item)}>highlight</button>
        {props.item.items ? <List
            items={props.item.items}
            highlightedItemsNames={props.highlightedItemsNames}
            onHighlight={props.onHighlight}
        /> : null}
    </div>
}

但是现在当我突出显示一个项highlightedItemsNames更改并且每个Item重新呈现时。要正确显示数据，只有突出显示的项目及其父项需要重新呈现。那么我怎样才能避免所有这些不必要的重新渲染呢？

在我的应用程序中，项目列表可能有点大，重新渲染所有这些都会导致应用程序明显冻结点击。

我可以在shouldComponentUpdate中实现Item来检查是否应该重新渲染任何子项，但这是否真的有机会提高虚拟dom的性能？

我没有使用Redux或任何其他状态管理库，我现在不想这样做。

Answer 1

ShouldComponentUpdate用于检查和决定是否需要重新渲染。显然，在大型项目不必要地重新渲染的情况下实施是明智的决定。我想你应该尝试实现这个事件，看看性能。我相信尝试是让大多数事情变得完美的原因。

如何避免在React

1 个答案: