(点击上方公众号，可快速关注)
近来React.js变得越来越流行，本文就来谈一谈React.js的入门实践，通过分析一些常用的概念，以及提供一些入门 的最佳编程编程方式，仅供参考。 首先需要搞懂的是，React并不是一个框架，React提供了一些新颖的概念、库 和编程原则让你能够同时在服务端和客户端编写快速、紧凑、漂亮的代码来构建 你的web应用。 如果你使用React，那么可能会涉及到一些常用的概念或技术，包括：
什么是React.js React.js不是一个框架 在整个Web应用的MVC架构中，你可以将React看作为视图层，并且是一个高效 的视图。React提供了和以往不一样的方式来看待视图，它以组件开发为基础。 对React应用而言，你需要分割你的页面，使其成为一个个的组件。也就是说，你的 应用是由这些组件组合而成的。 你可以通过分割组件的方式去开发复杂的页面或某个功能区块，并且组件是可以 被复用的。这个过程大概类似于用乐高积木去瓶装不同的物体。我们称这种编程方式称为 组件驱动开发。 React的一大特点是其所拥有的虚拟DOM，它让页面渲染变得非常的高效，并且比直接 操纵DOM变得更为可控。这两大特点的组合使得React具有强大的自上而下的页面渲染 能力。 好了，React的有两个特点：组件化和高效的虚拟DOM，但是为什么它这么被看好呢？ 因为React更多的是一种概念层面的东西，而库是其次的。也有很多其他遵从了这些思想的第三方实现。和每一个编程概念一样，React尤其 独有的解决方案、工具和工具。但这里并不会深入的去讨论他们，而是关注React本身。 Virtual DOM 为了跟踪模型层的变化，并且将其应用到DOM中（也就是渲染），我们需要注意两个 重要的事情：
对于（1）而言，React提供了一个观察者模型用于替代传统的脏检查（dirty checking）， 也就是持续的检查模型的变化。这也就是解释了为什么React不需要计算哪些发生 了改变的原因，因为它会立即知道。这个过程减少了计算量，并它应用程序变得 更平滑。但这里真正有趣的是，React是如何管理DOM操纵的。 对于DOM改变（2）而言，React在内存中构建了DOM的树形表示，并且计算出哪个 DOM元素应该被改变。对浏览器而言，DOM操纵是比较耗费性能的，因此我们更倾向于 让其变得最小化。幸运的是，React视图尽可能少的触及到DOM元素。给予对象表示而言， 更少的DOM操纵意味着计算会更快，因此DOM改变也被尽可能的减少。 React在底层实现了一个diffing算法，该算法使用DOM的树形表示法，当某个 节点发生变化（标记为dirty）时它会重新计算整个子树，你会注意到你的模型发生 了改变，因为整个子树在之后会被重新渲染。关于该算法的详细分析可以参考这篇文章(http://snip.ly/ywCe#http://calendar.perfplanet.com/2013/diff/)。 如何在服务端渲染 因为React在DOM表示时使用了一个虚拟（假的）DOM，因此借助于这种方式使得在服务端 渲染输出HTML称为可能（不借助于JSDom, PhantomJS等）。React还能智能的识别出 服务端渲染出来的页面标记，并在客户端只为这些标记添加事件处理器，这对构建 同构web app非常有用。 有意思的是，React渲染出来的HTML标记都包含了data-reactid属性，这有助于 React中追踪DOM节点。 一些阅读资料
组件驱动开发 对于component-driven development而言，你在一个模板中是看不到整个网站的。 虽然在一开始你可能会遇到一些困难，但是如果进一步的使用这种思路，你会发现 它易于理解，易于维护，并且容易测试。 如何使用React的方式来思考组件开发 下面我们来看如何实现组件驱动开发这一理念。我们看一个例子，这个例子来源于 thinking in react 这篇文章。对于构建一个可过滤的产品列表而言，通常其包括如下的组件结构： 一个组件应该包含什么 首先，理想的，我们应该遵守单一责任原则 来设计你的组件。当你发下你的组件应该做的更多的时候，你可以考虑将其分割为 更小的组件集合。 因为我们在讨论组件层级，因此在你的组件中也会使用到其他组件。我们首先看下 在ES5中组件代码是什么样子的：
|
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
