Question

我是新手做出反应并想知道是否有办法在渲染方法中每秒更改一个html行，而不是重新渲染整个组件？

我必须创建一个显示时间的状态栏，因此日期需要每秒更新一次。是否可以仅更改菜单栏时间div？

    componentDidMount: function() {
        const self = this;
        self.interval = setInterval(function() {
            self.setState({
                now: new Date(),
            });
        }, 1000);
    },

    componentWillUnmount: function() {
        clearInterval(this.interval);
    },


    render() {
        return (
            <div className="Menubar">
                <div className="Menubar-name">
                    <p>{this.state.login}</p>
                </div>
                <div className="Menubar-date">
                    <p><Time value={this.state.now} format="DD/MM/YYYY" /></p>
                </div>
                <div className="Menubar-time">
                    <p><Time value={this.state.now} format="HH:mm:ss" /></p>
                </div>
            </div>
        );
    },

感谢您的回答。

Answer 1

当状态发生变化时，React重新渲染整个树，但在渲染之后，它会计算虚拟dom和dom之间的差异，而在dom中只重新渲染差异。所以基本上你不需要做任何事情React会注意在dom中只有定时器文本会改变。

不是很棒：p

Answer 2

实际上，整个组件不会重新渲染。 render()返回虚拟DOM的实例，仅应用当前DOM和新DOM（由render()返回）之间的差异。因此，在这种情况下，您无需担心性能。

如果您觉得自己的表现不佳，可以考虑实施shouldComponentUpdate。至于我，我只需要执行一次或两次。在极少数情况下，React本身需要进行优化。

祝你好运！

有没有办法改变html行而不是重新渲染整个组件？

2 个答案: