react元素的渲染和JSX

元素是构成React的最小单位,用于描述屏幕上输出的内容,但是他有别于浏览器的DOM元素,React中元素就是普通的对象,ReactDOM可以确保浏览器DOM数据内容与React元素保持一致,这就是所谓的虚拟DOM吗?...额先这么认为吧,只是以前听说React采用虚拟DOM

我们要将React的元素渲染到DOM中我们需要有一个'根'DOM节点,然后在这个根DOM节点中的所有内容都将由ReactDOM来管理.一般来说采用React开发应用时只会定义一个根节点,但是如果是在已有仙姑中引入React那么就需要在不同部分单独定义React根节点

将React元素渲染到根DOM节点中,需要采用ReactDOM,render()方法

ReactDOM.render(  '自定义的对象或者说是要渲染 的内容' , '指定的根节点DOM元素')

ReactDOM.render( ' <div>hello </div>' , document.getElementById('div'))

React使用JSX来代替常规的JavaScript

JSX是一个看起来很像XML的JavaScript语法扩展,推荐在React中使用

我们知道就是元素是构成React应用的最小单位,而JSX就是用来声明React当中的元素.

注意:JSX就是JavaScript(虽然说是扩展但是也属于他的范畴),所以像JavaScript里面的标识符class和for等等便不再使用于做JSX的属性名,而是采用className和htmlFor

JSX看起来类似HTML,但是需要注意一下几点:

1.可以写多个HTML标签,但是要用一个div元素将其包裹起来

2.添加自定义属性要加上 data- 这个前缀

3.可以将React JSX 代码放在一个独立的js文件里面,引入时要指定script标签的类型为text/babel如下

<script type="text/babel" src="helloworld_react.js"></script>

4.可以在JSX中使用JavaScript表达式,但是表达式要写在{}花括号中,并且不能使用if else语句但可以使用三元运算符

5.React推荐使用内联样式,并采用camelCase语法(驼峰命名)来设置,React会在指定元素后面自动添加px

var myStyle = { fontSize: 100,

    color: '#FF0000'};ReactDOM.render(    <h1 style = {myStyle}>菜鸟教程</h1>,

    document.getElementById('example'));

6.注释需要写在花括号内 {/*注释...*/}

7.JSX允许在模板中插入数组,数组会自动展开所有item

    var arr = [ <h1>菜鸟教程</h1>,

  <h2>学的不仅是技术，更是梦想！</h2>,];ReactDOM.render(  <div>{arr}</div>,

  document.getElementById('example'));