render()
Unlike browser DOM elements, React elements are ordinary objects that are cheap to create. React DOM takes care of updating the DOM to be consistent with React elements.
The UI can be updated through [ReactDOM.render()](https://zh-hans.reactjs.org/docs/react-dom.html#render)
.
Note: This
ReactDOM.render()
will control the content you pass into the container node. When called for the first time, all DOM elements in the container node will be replaced, and subsequent calls will use React's DOM diffing algorithm for efficient updates.ReactDOM.render()
The container node will not be modified (only the container's child nodes will be modified). Components can be inserted into existing DOM nodes without overwriting existing child nodes. Currently a reference to the root component instanceReactDOM.render()
is returned .ReactComponent
However, using the returned reference should be avoided for now, as it is a legacy and component rendering may be asynchronous in some cases in future versions of React. If you really need to getReactComponent
a reference to the root component instance, then adding a callback ref to the root element is recommended .
ReactDOM.render(element, container[, callback])
React only updates what it needs to update
React elements are immutable objects . Once created, you cannot change its child elements or attributes. An element is like a single frame of a movie: it represents the UI at a specific moment.
Based on what we know, the only way to update the UI is to create a completely new element and pass it to ReactDOM.render() .
React DOM compares the element and its children to their previous state and only makes the necessary updates to bring the DOM to the expected state.
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)