上边的代码是包含 React 库浏览器解析的代码,浏览器并不处理任何 JSX 代码。人类喜欢处理 html 而不是一大堆的函数 createElement 调用 (想想一下只能用 document.createElement 创建网页)。这就是 JSX 存在的原因。上边的代码可以使用一个非常类似 HTML 的语法来实现,而不是通过 React.createElement 实现:
- // Example 4 - JSX (compare with Example 3)
- // https://jscomplete.com/repl?j=SJWy3otHW
- const InputForm =
- <form target="_blank" action="https://google.com/search">
- <div>Enter input and click Search</div>
- <input name="q" className="input" />
- <Button label="Search" />
- </form>;
- // InputForm "still" uses the Button component, so we need that too.
- // Either JSX or normal form would do
- function Button (props) {
- // Returns a DOM element here. For example:
- return <button type="submit">{props.label}</button>;
- }
- // Then we can use InputForm directly with .render
- ReactDOM.render(InputForm, mountNode);
上边的代码有个需要注意的地方:
上边的代码并不是 HTML 代码,里面依旧用 className 代替 class
虽然上边的代码类似 HTML ,但应该被认为是 JavaScript ,代码的结尾加了分号。
上边的代码就是(示例4) JSX 。传给浏览器的代码是示例 4 编译之后的版本示例 3 。示例 4 变成示例 3 需要使用预处理器将 JSX 代码转为 React.createElemnt 版本的代码。
通过 JSX 采用类似 HTML 的语法书写 React 组件是一个很好的想法。
标题的单词 “Flux” 使用来押韵的,“Flux”也是一个非常流行的 Facebook 应用框架 。最著名的一个实现版本是 Redux 。Flux 完美的适用于 React 交互模式。
顺便说一下,JSX 可以独立使用,而不只是依赖 React 。
来源: http://www.tuicool.com/articles/rMNv22Q