React中JSX的简单使用（二）

JSX如何防止XSS攻击

const title = response.potentiallyMaliciousInput;
const ele = <h1>{title}</h1>

JSX如何访问对象呢？

方式一：

const ele = 
	<h1 class="greeting">
		Hello World！
	</h1>

方式二：

const ele = React.createElement(
	'h1',
	{class:"greeting"},
	'Hello World!'
	
)

还记得刚开始学习react时引入的babel文件吗？
实际上babel会将JSX转译为 React.createElement()

//注意：这也是被简化后的结构！
const ele = {
	type:'h1'
	props:{
		className:'greeting',
		children:'Hello World!'
	}
}

React实现更新

function tick(){
	const ele = (
		<div>
			<h1>Hello World!</h1>
			<h1>It is {new Date().toLocaleTimeString()}</h1>
		</div>
	);
	ReactDOM.render(ele,document.getElementById('root'))	
}
setInterval(tick,1000)