react处理html数据,显⽰数据
⽤户界⾯能做的最基础的事就是显⽰⼀些数据。React 让显⽰数据变得简单,当数据变化的时候,⽤户界⾯会⾃动同步更新。
开始 #
让我们看⼀个⾮常简单的例⼦。新建⼀个名为 hello-react.html 的⽂件,代码内容如下:
Hello React
// ** 在这⾥替换成你的代码 **
在接下去的⽂档中,我们只关注 JavaScript 代码,假设我们把代码插⼊到上⾯那个模板中。⽤下⾯的代码替换掉上⾯⽤来占位的注释。
var HelloWorld = ateClass({
render: function() {
return (
Hello, !
It is {this.TimeString()}
);
}
});
setInterval(function() {
,
);
}, 500);
被动更新 (Reactive Updates) #
在浏览器中打开 hello-react.html ,在输⼊框输⼊你的名字。你会发现 React 在⽤户界⾯中只改变了时间, 任何你在输⼊框输⼊的内容⼀直保留着,即使你没有写任何代码来完成这个功能。React 为你解决了这个问题,做了正确的事。
我们想到的⽅法是除⾮不得不操作 DOM ,React 是不会去操作 DOM 的。它⽤⼀种更快的内置仿造的 DOM 来操作差异,为你计算出出效率最⾼的 DOM 改变。
对这个组件的输⼊称为 props - "properties"的缩写。得益于 JSX 语法,它们通过参数传递。你必须知道在组件⾥,这些属性是不可改变的,也就是说 this.props 是只读的。
组件就像是函数 #
React 组件⾮常简单。你可以认为它们就是简单的函数,接受 props 和 state (后⾯会讨论) 作为参数,然后渲染出 HTML。正是应为它们是这么的简单,这使得它们⾮常容易理解。
注意:
只有⼀个限制: React 组件只能渲染单个根节点。如果你想要返回多个节点,它们必须被包含在同⼀个节点⾥。
JSX 语法 #
我们坚信组件是正确⽅法去做关注分离,⽽不是通过“模板”和“展⽰逻辑”。我们认为标签和⽣成它的代码是紧密相连的。此外,展⽰逻辑通常是很复杂的,通过模板语⾔实现这些逻辑会产⽣⼤量代码。
我们得出解决这个问题最好的⽅案是通过 JavaScript 直接⽣成模板,这样你就可以⽤⼀个真正语⾔的所有表达能⼒去构建⽤户界⾯。
为了使这变得更简单,我们做了⼀个⾮常简单、可选类似 HTML 语法 ,通过函数调⽤即可⽣成模板的编译器,称为 JSX。
JSX 让你可以⽤ HTML 语法去写 JavaScript 函数调⽤ 为了在 React ⽣成⼀个链接,通过纯 JavaScript 你可以这么写:
通过 JSX 这就变成了
。
html ul标签
我们发现这会使搭建 React 应⽤更加简单,设计师也偏向⽤这⽤语法,但是每个⼈可以有它们⾃⼰的⼯作流,所以JSX 不是必须⽤的。
JSX ⾮常⼩;上⾯“hello, world”的例⼦使⽤了 JSX 所有的特性。想要了解更多,请看 深⼊理解 JSX。或者直接使⽤在线 JSX 编译器观察变化过程。
JSX 类似于 HTML,但不是完全⼀样。参考 JSX 陷阱 学习关键区别。
[Babel 公开了⼀些使⽤ JSX 的⽅式],从命令⾏⼯具到 Ruby on Rails 集成。选择⼀个对你来说最合适的⼯具。
没有 JSX 的 React #
JSX完全是可选的;你⽆需在 React 中必须使⽤ JSX。你可以通过 ateElement 来创建⼀个树。第⼀个参数是标签,第⼆个参数是⼀个属性对象,每三个是⼦节点。
var child1 = ateElement('li', null, 'First Text Content');
var child2 = ateElement('li', null, 'Second Text Content');
var root = ateElement('ul', { className: 'my-list' }, child1, child2);
⽅便起见,你可以创建基于⾃定义组件的速记⼯⼚⽅法。
var Factory = ateFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
React 已经为 HTML 标签提供内置⼯⼚⽅法。
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论