react element rendering

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 instance
ReactDOM.render() is returned  . ReactComponentHowever, 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 get  ReactComponent 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)

 

Guess you like

Origin blog.csdn.net/m0_67388537/article/details/131937354