注释
jsx语法不是js环境，因此不能渲染js注释，jsx语法也不是js环境，不能渲染HTML注入：<!-- html注释 -->
所以为了在jsx语法中，让js注释生效，我们要创建js环境
注释语法有注释掉语句的功能，所以注意：如果使用单行注释，千万不要注释掉插值闭合符号
所以在工作中，多行注释更常用。
虚拟DOM四类属性
在react中，虚拟DOM有四类属性：元素属性，非元素属性，特殊元素属性以及自定义数据属性
自定义数据属性
我们为元素添加的自定义数据通常是自定义数据属性，主要目的是为了存储数据
在html5规范中，通常用data-前缀定义自定义数据属性。
元素属性
这类属性对于元素来说具有一定的功能意义。
例如 title 代表标题，id 代表元素的id，但是有一个使用的时候是特殊的
style定义样式的属性
在react中，属性值必须是对象
语法 style={{
backgroundColor: ‘green’
}}
注意：属性名称要使用驼峰式命名
style属性不论是在jsx语法中，还是在createElement方法中，属性值都必须是对象
特殊元素属性
在react的虚拟DOM中，有两个属性是特殊的，他们命中的js中的关键字或者保留字
class 命中了关键字class，因此要写成className
for 命中了关键字for，因此要写成htmlFor
举例：
// 定义类
class Demo extends Component {
// 渲染
render() {
return (
<div>
<h1 style={{
color: 'red',
backgroundColor: 'green'
}}>菜鸟学习</h1>
<div className="demo"></div>
<label htmlFor="username">用户名</label>
<input id="username" type="text"/>
</div>
)
}
}
非元素属性
就是本身不是元素所具有的属性，是react拓展的属性，让该属性在元素上起到一定的作用的
ref属性
为虚拟DOM添加该属性，此时我们就可以在组件中，通过this.refs获取该虚拟DOM对应的真实DOM元素，因此要操作该元素要使用源生的DOM API
react提供了一个组件方法componentDidMount,表示组件创建完成，此时我们可以通过this.refs查看元素
注意：工作中，尽量避免使用this.refs获取DOM元素，并操作这个DOM元素。
dangerouslySetInnerHTML
使用一种危险的方式设置元素的内容：
这里的危险是指不合法，如
不能使用式样式字符串
不能渲染DOM标签
...
dangerouslySetInnerHTML属性值是对象，__html属性用来设置内容
注意：工作中，尽量避免使用。设置的内容没有经过虚拟DOM处理
key
设置元素reactid，通常用在循环列表中
通过设置key可以让虚拟DOM与页面中的元素产生对应关系
render() {
console.log(this)
var link = '<a href="" style="color: red" class="color">hello</a>'
return (
<div>
<h1 ref="title">菜鸟学习</h1>
<div>{link}</div>
<div className="color"></div>
<div dangerouslySetInnerHTML={{ __html: link }}></div>
<div key="11">html</div>
{/*<ul>
{[
<li>爱奇艺高清</li>,
]}
</ul>*/}
<ul>{this.createView()}</ul>
</div>
)
}
组件属性
虚拟DOM是对真实的DOM模拟，因此虚拟DOM也可以添加属性，
组件为了复用虚拟DOM，因此组件与虚拟DOM的行为是一致的，虚拟DOM可以添加属性，组件也可以。
我们为了让元素展示出多样式，可以为元素定义属性
我们为了让组件展示出多样式，可以为组件定义属性
组件定义属性的语法跟虚拟DOM定义属性的语法是一样的，如
属性分类
虚拟DOM中，属性可以分成四类：元素属性，非元素属性，特殊元属性，自定义数据属性
组件的属性只有一类，就是自定义数据属性
为组件添加属性，就是为了给组件传递数据
获取属性
在组件中，我们可以通过this.props来获取属性数据
注意：属性数据是外部传递的，应该在组件的外部维护，因此不允许在组件内部修改属性数据
默认属性数据
我们可以为组件定义defaultProps静态属性，定义默认的属性数据
ES6中有两种方式为类定义静态属性
第一种，在类体中，通过static定义特性方法（get，set）
第二种，在类体外，直接通过点语法，为类赋值
注意：React建议我们用第二种方式，为类定义默认属性数据：在类体外，通过点语法定义
属性约束
在16版本中，核心库已经与各个端解耦了，因此对于属性类的约束性模块被拆分出来了
该模块叫prop-types
使用该模块要安装
npm install prop-types
我们可以为组件定义静态属性propTypes来对组件的属性做约束
prop-types提供了大量的类型，是用来约束属性的
每个类型下面，有个isRequired方法，表示该属性是必填的
注意：一旦定义了默认属性，属性约束将失效。
