Elements are the smallest units that make up a React application and are used to describe what is output on the screen.
const element = <h1>Hello, world!</h1>;
With the browser’s First, we add an id= “example” to a HTML page Here We use To set the Currently, the only way to update the interface is to create a new element and pass it in Take a look at an example of this timer: The above examples are passed through We can encapsulate the part we are going to show, and the following example is represented by a function: In addition to functions, we can also create a React will only update the necessary parts It is worth noting that React DOM first compares the contents of the elements in order, while only the changed parts are updated during rendering.
DOM
elements are different. Elements in React are actually ordinary objects. React DOM ensures that browsers
DOM
the datacontent of the
React
the elements are consistent. 3.3.1. Render elements into DOM ¶
<div>
:<div id="example"></div>
div
everything in will be managed by React DOM, so we call it the “root” DOM node.
React
generally, only one root node is defined when developing an application. But if you are introducing it into an existing project
React
if so, you may need to define separately in different parts
React
root node.
React
elements are rendered to the root DOM node, we pass them all to the
ReactDOM.render()
to render it to the page:Example ¶
constelement=
<h1>Hello,world!</h1>;ReactDOM.render(element,document.getElementById('example'));
3.3.2. Update element rendering ¶
React
elements are immutable. After an element is created, you cannot change its contents or attributes.
ReactDOM.render()
methods:Example ¶
functiontick(){constelement=(<div> <h1>Hello,world!</h1>
<h2>Now it's {newDate().toLocaleTimeString()}.</h2>
</div>);ReactDOM.render(element,document.getElementById('example'));}setInterval(tick,1000);
setInterval()
method, call once per second
ReactDOM.render()
.Example ¶
functionClock(props){return(<div> <h1>Hello,world!</h1>
<h2>Now it's {props.date.toLocaleTimeString()}.</h2>
</div>);}functiontick(){ReactDOM.render(<Clockdate={newDate()}/>,document.getElementById('example'));}setInterval(tick,1000);
React.Component
the ES6 class, which encapsulates the elements to be displayed, should be noted in the
render()
method, you need to use the
this.props
replace
props
:Example ¶
classClockextendsReact.Component{render(){return(<div>
<h1>Hello,world!</h1>
<h2>Now it's {this.props.date.toLocaleTimeString()}.</h2>
</div>);}}functiontick(){ReactDOM.render(<Clockdate={newDate()}/>,document.getElementById('example'));}setInterval(tick,1000);