Reagieren Sie auf das Rendern von Elementen

machen()

Im Gegensatz zu Browser-DOM-Elementen sind React-Elemente gewöhnliche Objekte, die kostengünstig zu erstellen sind. React DOM sorgt dafür, dass das DOM so aktualisiert wird, dass es mit den React-Elementen konsistent ist.
Die Benutzeroberfläche kann über  aktualisiert werden [ReactDOM.render()](https://zh-hans.reactjs.org/docs/react-dom.html#render) .

Hinweis: Dadurch
ReactDOM.render() wird der Inhalt gesteuert, den Sie an den Containerknoten übergeben. Beim ersten Aufruf werden alle DOM-Elemente im Containerknoten ersetzt und nachfolgende Aufrufe verwenden den DOM-Diffing-Algorithmus von React für effiziente Aktualisierungen.
ReactDOM.render() Der Containerknoten wird nicht geändert (nur die untergeordneten Knoten des Containers werden geändert). Komponenten können in bestehende DOM-Knoten eingefügt werden, ohne bestehende untergeordnete Knoten zu überschreiben.  Derzeit wird ein Verweis auf die Root-Komponenteninstanz
ReactDOM.render() zurückgegeben  . ReactComponentDie Verwendung der zurückgegebenen Referenz sollte jedoch vorerst vermieden werden, da es sich um ein Legacy-Objekt handelt und das Rendern von Komponenten in zukünftigen Versionen von React in einigen Fällen asynchron erfolgen kann. ReactComponent Wenn Sie wirklich einen Verweis auf die Root-Komponenteninstanz  benötigen  , wird empfohlen, dem Root-Element einen Callback-Ref hinzuzufügen .

ReactDOM.render(element, container[, callback])

React aktualisiert nur das, was aktualisiert werden muss

Reaktionselemente sind unveränderliche Objekte . Nach der Erstellung können Sie die untergeordneten Elemente oder Attribute nicht mehr ändern. Ein Element ist wie ein einzelner Frame eines Films: Es repräsentiert die Benutzeroberfläche zu einem bestimmten Zeitpunkt.
Nach unserem Kenntnisstand besteht die einzige Möglichkeit, die Benutzeroberfläche zu aktualisieren, darin, ein völlig neues Element zu erstellen und es an  ReactDOM.render() zu übergeben .
React DOM vergleicht das Element und seine untergeordneten Elemente mit ihrem vorherigen Zustand und nimmt nur die notwendigen Aktualisierungen vor, um das DOM in den erwarteten Zustand zu bringen.

class HelloWorld extends React.Component {
      render(){
        return (
          <div className={'danger large'}>
            <h2>倒计时</h2>
            { /* className和class属性是一样的,而且必须是驼峰 */ }
            <span>{ new Date().toString() }</span>
          </div>
        )
      }
    }
    setInterval(()=>{
      // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
      ReactDOM.render(<HelloWorld />,document.getElementById('root'));
    },1000)