什么是JSX
- 基于ECMAScript的一种新特性
- 一种定义带属性树结构的语法
非DOM属性介绍
非DOM属性: dangerouslySetInnerHTML、ref、key
- dangerouslySetInnerHTML: 在JSX中直接插入HTML代码
- ref: 父组件引用子组件
- key: 提高渲染性能
React diff算法
实例演示
var style = {
color: "red",
border: "1px solid #000",
};
var rawHTML = {
__html: "<h1>I'm inner HTML</h1>"
};
ReactDOM.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>, document.body)
var style = {
color: "red",
border: "1px solid #000",
};
var HelloWorld = React.createClass({
this.refs.childp //可以通过此方法操做虚拟DOM结点p,此处未完成
render: function() {
return <p ref="childp">Hello, World</p>
},
});
ReactDOM.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body)
var style = {
color: "red",
border: "1px solid #000",
};
var HelloWorld = React.createClass({
render: function() {
return <ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>
}
});
ReactDOM.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body)