如何使用useEffect钩子实现复杂的shouldComponentUpdate?

时间:2020-06-01 11:23:54

标签: javascript reactjs react-hooks

我有一个容器组件,我想将其转换为功能组件并使用react挂钩,例如useEffect。但是,我有一个相当复杂的shouldComponentUpdate函数,该函数根据当前的道具和状态以及下一个道具和状态执行一些逻辑,以防止不必要的渲染。

这是我的shouldComponentUpdate函数:

shouldComponentUpdate(nextProps, nextState) {
    const { current, id, language: { isRtl }, query: { response: { cookie, hits } } } = this.props;
    if (nextProps.language.isRtl !== isRtl) {
        return true;
    }
    const { selected } = this.state;
    if (current !== nextProps.current) {
        if  (id === nextProps.current) {
            if  (nextProps.direction !== 0) {
                this.select(nextProps.direction > 0 ? 0 : hits.length - 1, true);
                return false;
            }
        } else {
            if (selected >= 0) {
                this.setState({ selected: -1 });
            }
            return false;
        }
    }
    if (cookie === null && nextState.selected !== selected) {
        const redrawHit = (index, className) => {
            if (index >= 0) {
                hits[index].ref.current.updateState({ className });
            }
        };
        redrawHit(nextState.selected, 'hit-selected');
        redrawHit(selected, 'hit-deselected');
    }
    return cookie !== null;
}

我无法找到通过useEffect挂钩实现它的正确方法。有人可以帮我吗?

0 个答案:

没有答案