要素のレンダリングに反応する

与える（）

ブラウザーの DOM 要素とは異なり、React 要素は安価に作成できる通常のオブジェクトです。React DOM は、React 要素との一貫性を保つために DOM を更新します。
UI はを通じて 更新できます[ReactDOM.render()](https://zh-hans.reactjs.org/docs/react-dom.html#render) 。

注: これにより、
ReactDOM.render() コンテナ ノードに渡すコンテンツが制御されます。初めて呼び出されたとき、コンテナ ノード内のすべての DOM 要素が置き換えられ、後続の呼び出しでは効率的な更新のために React の DOM 差分アルゴリズムが使用されます。
ReactDOM.render() コンテナ ノードは変更されません (コンテナの子ノードのみが変更されます)。コンポーネントは、既存の子ノードを上書きせずに、既存の DOM ノードに挿入できます。 現在、ルート コンポーネント インスタンスへの参照が
ReactDOM.render() 返されます 。ReactComponentただし、返された参照はレガシーであり、React の将来のバージョンでは場合によってはコンポーネントのレンダリングが非同期になる可能性があるため、返された参照の使用は現時点では避けるべきです。ReactComponent 本当にルート コンポーネント インスタンスへの参照を 取得する必要がある場合は 、ルート要素にコールバック refを追加することをお勧めします。

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

React は更新する必要があるもののみを更新します

React 要素は不変オブジェクトです。作成後は、その子要素や属性を変更することはできません。要素は映画の 1 つのフレームに似ており、特定の瞬間の UI を表します。
私たちが知っていることに基づくと、UI を更新する唯一の方法は、完全に新しい要素を作成し、それを ReactDOM.render()に渡すことです。
React DOM は要素とその子を以前の状態と比較し、DOM を期待した状態にするために必要な更新のみを行います。

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)