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

Question

我是 React 新手，想知道是否有办法在渲染方法中每秒更改一个 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() returns 虚拟实例 DOM 并且仅应用当前 DOM 和新 DOM（由 render() 返回）之间的差异。所以你不需要担心这种情况下的性能。

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

祝你好运！

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

Is there a way to change an html line instead of rerendering the whole component?

render

reactjs