写一个显示时间日期的
<!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">
let element;
function clock() {
element = (
<div>
<h1>Hello, World</h1>
<h2>现在是{new Date().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
clock();
setInterval(clock,1000);
//console.log(element);
</script>
</body>
</html>
注意如果要动态的显示时间的话reactDom要放在函数里面，因为这样才会多次调用函数。
let element; function clock() { element = ( <div> <h1>Hello, World</h1> <h2>现在是{new Date().toLocaleTimeString()}</h2> </div> ); } clock(); ReactDOM.render( element, document.getElementById('example') ); setInterval(clock,1000);
注意不能写成这样，这样子的话不会动态的显示时间，虽然element会动态的改变，但是的话，render还是只会执行一次
-------------------------------------------------------------------------------------------------------------------------------------------------------------
关于react里的this，第一次写组件
<script type="text/babel"> class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, World</h1> {console.log(this)}//输出为Clock组件 <h2>现在是{this.state.date.toLocaleDateString()}</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('example') ); </script>
要理解this的指向问题，直接把组件看出一个对象
然后render函数看成为一个方法，那么render又是在Clock里面所以this就指向了Clock
还有就是在写代码的时候区分开函数的书写方式，就好像代码里面constructor一样，注意里面分号 ； 的用法 ，以及还有一个传入参数的位置
还要理解一下props这个组件的属性，它是组件的属性，但是这个属性又是一个对象，所以里面可以装好多属性