codecamp

介绍JSX

元素渲染 在React APP中元素是最小的构建块,
一个元素被描述成如下:
const element =

Hello, world

; ## Rendering a element into DOM --- 假如在你的HTML文件中一个div:

我们把它叫做root节点,因为任何其他元素都会在它里面,他由React DOM进行管理。
通过React构建的应用通常都有一个root DOM节点;如果你要在已经存在的应用中整合React,可能会有很多root DOM 节点
通过`ReactDOM.render()`可以把元素渲染进root DOM 节点里面, const element =

Hello, world

; ReactDOM.render( element, document.getElementById('root') ); [尝试一下有惊喜(⊙o⊙)哦](https://codepen.io/gaearon/pen/rrpgNB?editors=1010) ## Updating the Rendered Element --- React 元素是不可变的,一旦你创建了元素,你就不能改变它的子元素和属性 到目前为止我所知道的更新UI的唯一方法就是重新创建元素,然后重新渲染 function tick() { const element = (

Hello, world!

It is {new Date().toLocaleTimeString()}.

); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); [尝试一下有惊喜(⊙o⊙)哦](https://codepen.io/gaearon/pen/gwoJZk?editors=0010) 实际上,大多数React app只能调用React.render()一次。
Hello world
元素渲染
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }