什麼是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)