React從入門到精通系列之(18)不使用JSX編寫React應用

張亞濤發表於2016-12-16
ReactJS

十八、不使用JSX編寫React應用

React並不是強制要求使用JSX來編寫應用。 當您不想在構建時設定並編譯JSX，那麼在開發階段只是單獨使用React而不去使用JSX會讓應用在構建時變得特別方便。

每個JSX元素只是呼叫React.createElement(component，props，... children)的語法糖。 所以，你用JSX做的任何事也可以使用純Javascript來完成。

例如，使用JSX編寫一個元件：

class Hello extends React.Component {
    render() {
        return <h1>hello zhangyatao</h1>;
    }
}
ReactDOM.render(<Hello />, document.getElementById(`root`));

上面這段程式碼會被編譯為下面這樣：

class Hello extends React.Component {
    render() {
        return React.createElement(`h1`, null, `hello zhangyatao`);
    }
}
ReactDOM.render(<Hello />, document.getElementById(`root`));

如果你很想看到更多的JSX如何轉換成JavaScript的例子，你可以試試線上Babel編譯器。

元件可以是一個字串，也可以是繼承了React.Component的子類，或者是一個沒有內部狀態的純函式。

如果您不喜歡一直重複地寫React.createElement，可以使用一個變數代替它：

const makeE = React.createElement;

ReactDOM.render(
    makeE(`h1`, null, `hello zhangyatao`),
    document.getElementById(`root`)
)

如果您在使用React.createElement時用了這種方式，那麼即便不使用JSX來編寫React也是很方便的。

相關文章