reactjs - RactiveJS 和 JSX

标签 reactjs ractivejs

RactiveJS 与 JSX 兼容吗?

我猜有些标记不兼容。我喜欢强类型的想法,并且能够在 JavaScript 源代码中干净地编写模板。也许这被认为是糟糕的设计?

最佳答案

没有。 React.js 和 Ractive.js 有许多相似之处(例如,两者都通过在内存中构建轻量级虚拟 DOM 来工作),但它们有一个非常重要的区别 - React 完全拒绝模板的想法。

也就是说 JSX 不是一种模板语言,它只是看起来像一种!在 React 中,如果你有这样的事情......

<h1>Hello world!</h1>

...它被 JSX 预处理器转换成这样的东西:

React.DOM.h1(null, 'Hello world!');

换句话说,JSX 描述的是函数,而不是模板。相比之下,在 Ractive 中,Mustache 模板被解析为可以作为 JSON 传输的树状结构。

现在,在这个例子中,原始字符串经过什么过程并不重要——它仍然会以 <h1> 结束。某处浏览器中的元素。但是,当您开始引入引用 this.state 的任意 JavaScript 时,它会变得更加困难。和 this.props - 可以改变 React 中组件的基本结构,但在 Ractive 中没有意义的东西。

Ractive 将来可能会支持除 Mustache 之外的模板语言,但 JSX 不太可能是其中之一,因为它们具有如此不同的方法和设计目标。

但是这里有一个相关的问题,即能够在单个文件中完整描述组件。有一些 ongoing work发生在那里 - 最有可能的情况是我们将能够在 .html 文件中描述组件(因为您可以在 HTML 中使用 JavaScript 和 CSS),而不是将模板写入您的 .js 文件。

关于reactjs - RactiveJS 和 JSX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20737863/

相关文章:

javascript - Ractive.js 中的 onrender 与 init

javascript - Ractive 模板中的多个数据对象

ractivejs - 有人为 ractivejs 创建过 TypeScript 定义文件吗?

javascript - 错误 : Actions must be plain objects. 使用自定义中间件进行异步操作。 React-redux 错误

javascript - componentDidMount 中的许多 API 调用

javascript - 在鼠标指针悬停的 react-vis 图表中添加一条垂直线

javascript - React 返回要渲染的组件数组未正确嵌套

reactjs - 具有 React 上下文的当前用户

javascript - 在 RactiveJS 中,我如何检测它是否分离?

javascript - 为什么 javascript 设置的样式不适用于 Ractive.js?