React元素渲染

最近在学React前端框架的一些内容,总结并分享一些我学习的内容,React里的元素是构成React应用最小的单位,他是用于描述屏幕上输出的内容。比如:

const element = <h1>Hello,React!</h1>;

它与浏览器的DOM元素不同,React当中的元素实际上是普通的对象,React DOM可以确保浏览器的DOM的数据内容和React元素保持一致。

如何将元素渲染到DOM中
在一个HTML页面中添加一个 id="example"的<div>:

<div id="example"></div>

这里面的div的所有的内容都由React DOM进行管理,所以把它称为“根” DOM节点。一般在用React开发时只会定义一个根节点,但是如果在一个已有项目中引入React的话,可能需要在不同的部分单独定义React根节点。
要将React元素渲染到根DOM节点里,通过传递给ReactDOM.render() 方法来将其渲染到页面上:
如下完整的实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
const element =<h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);
</script>

</body>
</html>



如何更新元素渲染
React里的元素都是不可变的。当元素被创建之后,就再无法改变其内容或者属性。
更新界面的办法就是创建一个新的元素,然后将它传入ReactDOM.render()方法:
如下完整的实例:通过setlnterval()方法,每一秒钟调用一次ReactDOM.render()。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在的时间是: {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);
</script>

</body>
</html>



也可以用一个函数表示,将展示的部分封装起来:
如下:

function Clock(props) { 
return ( 
<div>
      <h1>Hello, world!</h1>
      <h2>现在的时间是: {props.date.toLocaleTimeString()}.</h2>
    </div> 
); 
} 
function tick() {
 ReactDOM.render( 
<Clock date={new Date()} />, 
document.getElementById('example') 
); 
} 
setInterval(tick, 1000);



还有就是要注意,React DOM会先比较元素内容的先后的不同,在渲染的过程中只会更新元素改变的部分。

暂无评论