React.addons 是为了构建 React 应用而放置的一些有用工具的地方。此功能应当被视为实验性的,但最终将会被添加进核心代码中或者有用的工具库中:TransitionGroup和CSSTransitionGroup,用于处理动画和过渡,这些通常实现起来都不简单,例如在一个组件移除之前执行一段动画。LinkedStateMixin,用于简化用户表单输入数据和组件 state 之间的双向数据绑定。
每个项目使用不同的系统来构建和部署JavaScript。我们尝试尽量让React环境无关。ReactCDN托管的React我们在我们的下载页面提供了React的CDN托管版本。这些预构建的文件使用UMD模块格式。直接简单地把它们放在<script>标签中将会给你环境的全局作用域引入一个React对象。React也可以在CommonJS和AMD环境下正常工作。
从你的 render 方法中返回你的 UI 结构后,你会发现你想要“伸手”调用从 render 返回的组件实例的方法。通常来说,这样做对于通过你的应用程序制作数据流是没有必要的,因为 Reactive 数据流总是确保最新的 props 被发送到由 render() 输出的每个孩子中。但是在一些情况下,它仍然有可能是必要或有益的。考虑这样一种情况,当你在把一个 <input / >
React提供了强大的抽象,让你在大多数应用场景中不再直接操作DOM,但是有时你需要简单地调用底层的API,或者借助于第三方库或已有的代码。虚拟DOMReact是很快的,因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述,React能够利用内存中的描述来快速地计算出差异,然后更新浏览器中的DOM。
诸如 <input>、<textarea>、<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。交互属性表单组件支持几个受用户交互影响的属性:value,用于 <input>、<textarea> 组件。checked,用于类型为 checkbox 或者 radio 的 <input> 组件。
React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。可以使用 JSX 展开属性 来合并现有的 props 和其它值:return <Component {...this.props} more="values" />;如果不使用 JSX,可以使用一些对象辅助方法如 ES6 的 Object.assign 或 Underscore _.extend。
设计接口的时候,把通用的设计元素(按钮,表单框,布局组件等)拆成接口良好定义的可复用的组件。这样,下次开发相同界面程序时就可以写更少的代码,也意义着更高的开发效率,更少的 Bug 和更少的程序体积。Prop 验证随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入 propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。
目前为止,我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一:可组合性(composability)。动机:关注分离通过复用那些接口定义良好的组件来开发新的模块化组件,我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的不同关注面分离。
我们已经学习如何使用 React 显示数据。现在让我们来学习如何创建交互式界面。简单例子var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ?
JSX 与 HTML 非常相似,但是有些关键区别要注意。注意:关于 DOM 的区别,如行内样式属性 style,参考 DOM 区别HTML 实体HTML 实体可以插入到 JSX 的文本中。 <div>First · Second</div>如果想在 JSX 表达式中显示 HTML 实体,可以会遇到二次转义的问题,因为 React 默认会转义所有字符串,为了防止各种 XSS 攻击。
如果你事先知道组件需要的全部 Props(属性),JSX 很容易地这样写: var component = <Component foo={x} bar={y} />;修改 Props 是不好的,明白吗如果你不知道要设置哪些 Props,那么现在最好不要设置它: var component = <Component />; component.props.foo = x; // 不好 component.props.bar = y;
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。为什么要用 JSX?你不需要为了 React 使用 JSX,可以直接使用原生 JS。但是,我们建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。它对于非专职开发者比如设计师也比较熟悉。XML 有固定的标签开启和闭合的优点。
用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。开始让我们看一个非常简单的例子。新建一个名为 hello-react.html 的文件,代码内容如下:<!DOCTYPE html><html> <head> <title>Hello React</title> <script src="http://fb.me/react-{{site.
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。
这是一篇源自官方博客 的文章。在我看来, React 是较早使用 JavaScript 构建大型、快速的 Web 应用程序的技术方案。它已经被我们广泛应用于 Facebook 和 Instagram 。React 众多优秀特征中的其中一部分就是,教会你去重新思考如何构建应用程序。本文中,我将跟你一起使用 React 构建一个具备搜索功能的产品列表。
我们将构建一个简单却真实的评论框,你可以将它放入你的博客,类似disqus、livefyre、facebook提供的实时评论的基础版。我们将提供以下内容:一个展示所有评论的视图一个提交评论的表单用于构建自定制后台的接口链接(hooks)同时也包含一些简洁的特性:评论体验优化: 评论在保存到服务器之前就展现在评论列表,因此用户体验很快。
JSFiddle开始 Hack React 的最简单的方法是用下面 JSFiddle 的 Hello Worlds:React JSFiddleReact JSFiddle without JSX入门教程包 (Starter Kit)开始先下载入门教程包在入门教程包的根目录,创建一个含有下面代码的 helloworld.html。<!DOCTYPE html><html> <head> <script src="build/react.js"></script> <
React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。具备以下特性:不是一个 MVC 框架不使用模板响应式更新非常简单HTML5 仅仅是个开始仅仅是 UI许多人使用 React 作为 MVC 架构的 V 层。 尽管 React 并没有假设过你的其余技术栈, 但它仍可以作为一个小特征轻易地在已有项目中使用虚拟 DOMReact 为了更高超的性能而使用虚拟 DOM 作为其不同的实现。
计时器是一个应用程序的重要的一个组成部分,React Native 实现了Browser timers。 计时器setTimeout,clearTimeoutsetInterval, clearIntervalsetImmediate, clearImmediaterequestAnimationFrame, cancelAnimationFramerequestAnimationFrame(fn) 相当于 setTimeout(fn, 0),他们是在刷新屏幕之后被正确触发。
React Native 的一个目标是成为一个游乐场所,在这里我们可以尝试不同的体系结构和疯狂的想法。自从浏览器使用起来不够灵活,我们别无选择,只能去实现整个堆栈。在这个我们并不打算改变什么的地方,我们试图尽可能忠实于浏览器的 APIS。网络协议栈是一个很好的例子。 XMLHttpRequestXMLHttpRequest API 是在 iOS networking apis 之上实现的。
关注时代Java