目录
将元素渲染到DOM中
-
通过React渲染简单元素
用react实现该html内容：<h1>这是我的第一个小实验</h1>
第一步：创建html文件，引入相应的react和react-dom包，并定义一个容器用于存放虚拟DOM；
<div id="element"></div>
第二步：创建虚拟DOM元素;
const element = <h1>这是我的第一个小实验</h1>
还可以这样写：const element = React.createElement('h1', null, '这是我的第一个小实验');
第三步：将虚拟DOM元素渲染到页面上
ReactDom.render(element, document.getElementById('example'));
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
const element =<h1>这是我的第一个小实验</h1>;
ReactDOM.render(element,document.getElementById('example');
</script>
</body>
</html>-
通过定时器改变元素内容
第一步：同上面一样创建一个DOMR容器用于存放虚拟DOM
第二步：用js编写改变元素内容的方法
function update() {
const element = (<div> <h1>现在的时间是：{new Date().toLocaleTimeString()}</h2> </div>);
ReactDOM.render(element,document.getElementById('example'));
}
第三步：设置定时器，定时刷新DOM元素内容
setInterval(update,1000);
完整代码
<html>
<head>
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function update() {
const element = (
<div>
<h1>现在的时间是：{new Date().toLocaleTimeString()}</h1>
</div>
);
ReactDOM.render(element,document.getElementById('example'));
}
setInterval(update,100);
</script>
</body>
</html>实验效果
-
将要展示的内容封装成函数
第一步:修改上一个例子，将要展示的内容封装成函数
function Update(props){
return (<div> <h1>北京时间：{props.toLocaleTimeString()}</h1> </div>);
}
第二步：在ReactDom.render( )中，将展示内容的函数作为参数传进来
function clock(){
ReactDOM.render(Update(new Date()), document.getElementById('example'));
}
第三步：调用定时器
setInterval(clock,1000);
完整代码
<html>
<head>
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function Update(props){
return (
<div>
<h1>北京时间：{props.toLocaleTimeString()}</h1>
</div>);
}
function clock(){
ReactDOM.render(Update(new Date()), document.getElementById('example'));
}
setInterval(clock,1000);
</script>
</body>
</html>-
将展示内容封装成类
除了函数还可以将要展示的内容封装成 React.Component 的 ES6 类；
将展示内容封装成类,其他的不变
class Update extends React.Component {
render() {
return (< div>
<h1>凌晨时间：{this.props.date.toLocaleTimeString()}</h1>
</div>
);
}
}
完整代码
<html>
<head>
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Update extends React.Component {
render() {
return (
< div>
<h1>凌晨时间：{this.props.date.toLocaleTimeString()}</h1>
</div>
);
}
}
function clock(){
ReactDOM.render(<Update date={new Date()} />, document.getElementById('example'));
}
setInterval(clock,1000);
</script>
</body>
</html>关于React的元素渲染暂时就先学习到这里，接下来将学习React的另一重量级杀器：JSX