React--渲染元素

不同于浏览器的 DOM 元素， React 元素是普通的对象，非常容易创建。React DOM 会负责更新 DOM ，以匹配React元素
const element = <h1>Hello, world</h1>;

注意：元素不是组件，他是构成组件的材料。

渲染元素到dom

<script type='text/babel'>
            const destination=document.querySelector('#app');
            const ele=(<h1>hello</h1>);
            ReactDOM.render(ele,destination);
</script>

更新已渲染的元素

 <script type='text/babel'>
            const destination=document.querySelector('#app');

            function change() {
                const ele=(
                        <div>
                            <h1>hello</h1>
                            <h2>It is {new Date().toLocaleTimeString()}.</h2>
                        </div>);
                ReactDOM.render(ele,destination);
            }
            setInterval(change,1000)
            //以上代码每隔 1 秒, 就会通过 setInterval() 回调 ReactDOM.render() 方法来重新渲染元素。
        </script>

实际上，大多数 React 应用只会调用 ReactDOM.render() 一次。在接下来的章节中，我们将学习如何将这些代码封装到有状态的组件中。

React 只更新必需要更新的部分

• 即使我们我们每隔 1 秒都重建了整个元素, 但实际上 React DOM 只更新了修改过的文本节点.