认识React.js

目录(?)[+]

React并不是一个框架，React提供了一些新颖的概念、库 和编程原则让你能够同时在服务端和客户端编写快速、紧凑、漂亮的代码来构建 你的web应用。

React里常用的概念或技术：

  • ES6 React
  • 虚拟DOM（virtual DOM）
  • 组件驱动开发（component-driven development）
  • 不变性（immutability）
  • 自上而下的渲染（top-down rendering）
  • 渲染路径和优化
  • 打包工具, ES6, 构建请求, debugging, 路由等
  • 同构React（isomorphic React）

什么是React.js

React.js不是一个框架

在整个Web应用的MVC架构中，你可以将React看作为视图层，并且是一个高效 的视图。React提供了和以往不一样的方式来看待视图，它以组件开发为基础。 对React应用而言，你需要分割你的页面，使其成为一个个的组件。也就是说，你的应用是由这些组件组合而成的。 你可以通过分割组件的方式去开发复杂的页面或某个功能区块，并且组件是可以 被复用的。这个过程大概类似于用乐高积木去瓶装不同的物体。我们称这种编程方式称为 组件驱动开发。

React的一大特点是其所拥有的虚拟DOM，它让页面渲染变得非常的高效，并且比直接 操纵DOM变得更为可控。这两大特点的组合使得React具有强大的自上而下的页面渲染 能力。 React的有两个特点：组件化和高效的虚拟DOM，但是为什么它这么被看好呢？ 因为React更多的是一种概念层面的东西，而库是其次的。也有很多其他遵从了这些思想的第三方实现。和每一个编程概念一样，React尤其 独有的解决方案、工具和工具。但这里并不会深入的去讨论他们，而是关注React本身。

Virtual DOM

为了跟踪模型层的变化，并且将其应用到DOM中（也就是渲染），我们需要注意两个重要的事情：
     1) 数据是什么时候改变的
     2) 哪一个（些）DOM元素需要被更新
    对于（1）而言，React提供了一个观察者模型用于替代传统的脏检查（dirty checking）， 也就是持续的检查模型的变化。这也就是解释了为什么React不需要计算哪些发生 了改变的原因，因为它会立即知道。这个过程减少了计算量，并它应用程序变得 更平滑。但这里真正有趣的是，React是如何管理DOM操纵的。
    对于DOM改变（2）而言，React在内存中构建了DOM的树形表示，并且计算出哪个 DOM元素应该被改变。对浏览器而言，DOM操纵是比较耗费性能的，因此我们更倾向于 让其变得最小化。幸运的是，React视图尽可能少的触及到DOM元素。给予对象表示而言， 更少的DOM操纵意味着计算会更快，因此DOM改变也被尽可能的减少。
    React在底层实现了一个diffing算法，该算法使用DOM的树形表示法，当某个 节点发生变化（标记为dirty）时它会重新计算整个子树，你会注意到你的模型发生 了改变，因为整个子树在之后会被重新渲染。

组件驱动开发

对于component-driven development而言，你在一个模板中是看不到整个网站的。 虽然在一开始你可能会遇到一些困难，但是如果进一步的使用这种思路，你会发现 它易于理解，易于维护，并且容易测试。

如何使用React的方式来思考组件开发

下面我们来看如何实现组件驱动开发这一理念。我们看一个例子，这个例子来源于 thinking in react 这篇文章。对于构建一个可过滤的产品列表而言，通常其包括如下的组件结构：

  • FilterableProductTable

    • SearchBar
    • ProductTable 
      • ProductCategoryRow
      • ProductRow

一个组件应该包含什么

首先，理想的，我们应该遵守单一责任原则 来设计你的组件。当你发下你的组件应该做的更多的时候，你可以考虑将其分割为 更小的组件集合。

因为我们在讨论组件层级，因此在你的组件中也会使用到其他组件。我们首先看下 在ES5中组件代码是什么样子的：

var HelloComponent = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    •

如果使用ES6，你的组件代码可以这样写：

class HelloComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    •

JS和JSX

正如你所看到的，我们的组件是JS和HTML代码的混合，你可能会觉得这很糟糕，因为 MVC一直在教我们尽可能的隔离视图和控制逻辑。但另一方，这种混合获得另一个层面的 单一责任，他使得组件更加的灵活和可重用。

当然，在React中你也可以使用纯JS来编写你的组件：

render () {
    return React.createElement("div", null, "Hello ",
        this.props.name);
}

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    •

你会发现这很麻烦，没有使用HTML来得直观。因此React提供了JSX (JavaScript eXtension)语法让你能够在JS中书写HTML代码。

render () {
    return <div>Hello {this.props.name}</div>;
}

    

  • 1
    • 

  • 2
    • 

  • 3
    •

什么是JSX

JSX在ECMAScript的基础上提供了类似于XML的扩展。 JSX和HTML有点像，但也有不一样的地方。例如，HTML中的class属性在JSX中 为className。其他不一样的地方，你可以参考FB的HTML Tags vs. React Components 这篇文章。

但是由于浏览器原生并不支持JSX，因此我们需要将其编译为JS，有很多方法能够 完成这个任务，后面我们会提到这些方法。此外，Babel也能够讲JSX编译为JS。

组件还应该包括什么

每个组件都应该包括一些内部状态，处理逻辑，和事件处理器（例如按钮点击、输入改变）， 当然也包括一些内部的样式。

你会遇到{this.props.name}这样的代码片段，这意味着你可以通过属性的方式 先组件内传递数据，例如。这让组件变得可重用， 并且能够自上而下的向嵌套的组件传递数据。

示例代码如下：

class UserName extends React.Component {
  render() {
    return <div>name: {this.props.name}</div>;
  }
}

class User extends React.Component {
  render() {
    return <div>
        <h1>City: {this.props.user.city}</h1>
        <UserName name={this.props.user.name} />
      </div>;
  }
}

var user = { name: ‘John‘, city: ‘San Francisco‘ };
React.render(<User user={user} />, document.body);

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    • 

  • 6
    • 

  • 7
    • 

  • 8
    • 

  • 9
    • 

  • 10
    • 

  • 11
    • 

  • 12
    • 

  • 13
    • 

  • 14
    • 

  • 15
    • 

  • 16
    • 

  • 17
    •

React拥抱ES6

在React中尝试编写ES6是个非常不错的开始，React并不是一开始就支持ES6的， 而是从v0.13.0开始支持的。你会经常用到的ES6特性包括类、箭头函数、consts 和模块。例如，我们会经常从继承React.Component类开始编写我们的组件。

还有一点需要注意的是，并不是每个浏览器都支持ES6，因此目前情况下，我们需要 使用一些工具将我们编写的ES6代码转换为ES5代码，我推荐使用Babel。

在打包时使用Webpack和Babel

我们会经常用到一些工具，首先一个是node.js的模块系统和它的包管理工具npm。 我们会编写node风格的代码来require我们需要的东西。并且react本身也是一个独立的 npm包。

通常你有两种选择，commonJS或者ES6：

var React = require(‘react/addon‘);

var MyComponent = React.createClass({
    // do something
});

module.exports = MyComponent;

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    • 

  • 6
    • 

  • 7
    •

或者

import React from ‘react/addons‘;
class MyComponent extends React.Component {
    // do something use es6
}
export default MyComponent;

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    •

例如，我们会使用debug模块来调试， 使用superagent模块来编写请求。

现在，我们有了Node的依赖管理系统，并且使用npm来提供模块。下面我们需要做的 事：选择一个合适的库来打包我们的代码，并且能够让其运行在浏览器上。

因此我们需要一个打包器。目前最流行的解决方案包括两个，分别是Browserify和 Webpack。我们选择使用Webpack，因为Webpack 更适合于React社区。

Webpack是如何工作的

Webpack用于打包我们的代码，并且包含进我们需要的包，然后输出为浏览器可运行的 文件。因为我们使用JSX和ES6，因此我们需要相应的工具来将其转换为ES5。事实上, Babel能够同时做这两件事。使用Webpack能够很轻松的完成这些任务，因为Webpack 是面向配置的。

npm init
npm install webpack --save-dev
npm install babel --save-dev
npm install babel-loader --save-dev

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    •

然后创建webpack.config.js文件，我们需要使用ES5来编写该文件，因为它是 webpack的配置文件。一个典型的配置方式如下：

var path = require(‘path‘);

module.exports = {
  entry: path.resolve(__dirname, ‘../src/client/scripts/client.js‘),
  output: {
    path: path.resolve(__dirname, ‘../dist‘),
    filename: ‘bundle.js‘
  },

  module: {
    loaders: [
      {
        test: /src\/.+.js$/,
        exclude: /node_modules/,
        loader: ‘babel‘
      }
    ]
  }
};

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    • 

  • 6
    • 

  • 7
    • 

  • 8
    • 

  • 9
    • 

  • 10
    • 

  • 11
    • 

  • 12
    • 

  • 13
    • 

  • 14
    • 

  • 15
    • 

  • 16
    • 

  • 17
    • 

  • 18
    • 

  • 19
    •

运行webpack命令你可以执行打包流程。这之后你可以只在页面中包含bundle.js即可。 如下：

<script src=‘bundle.js‘></script>

    

  • 1
    •

(提示：你可以使用node-static来存放你的静态资源文件，使用npm install -g node-static来安装，并使用static .来启动)。

项目结构

一个典型的项目结构你可以参考这个仓库。

config/
    app.js
    webpack.js (js config over json -> flexible)
src/
  app/ (the React app: runs on server and client too)
    components/
      __tests__ (Jest test folder)
      AppRoot.jsx
      Cart.jsx
      Item.jsx
    index.js (just to export app)
    app.js
  client/  (only browser: attach app to DOM)
    styles/
    scripts/
      client.js
    index.html
  server/
    index.js
    server.js
.gitignore
.jshintrc
package.json
README.md

    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    • 

  • 6
    • 

  • 7
    • 

  • 8
    • 

  • 9
    • 

  • 10
    • 

  • 11
    • 

  • 12
    • 

  • 13
    • 

  • 14
    • 

  • 15
    • 

  • 16
    • 

  • 17
    • 

  • 18
    • 

  • 19
    • 

  • 20
    • 

  • 21
    • 

  • 22
    • 

  • 23
    • 

  • 24
    •
顶
0
时间： 2024-10-23 21:31:47

认识React.js的相关文章

react.JS基础

1.ReactDOM.render() React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript" src

Angular、React.js 和Node.js到底选谁?

为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情,但在这种情况下,对于到底应该选择哪种框架,程序员之间并没有一致的意见,每个人都有不同的想法,并且听起来都相当合理. 为了让一切归于和谐,本文就来探究一下这三大框架各自的优缺点. 基础知识部分: 在我们深入研究这三种框架的具体细节之前,先来了解一些前情提要.yigouyul22.com xucaiz

使用 React.js 的渐进式 Web 应用程序：第 1 部分 - 介绍

来自译者 markzhai:大家也知道最近 Web 越来越火了,如果你还以为 Web 就是 jQuery.Ajax.CSS 什么的,那你就 out 了.给大家几个链接看一看吧: https://shop.polymer-project.org/ https://housing.com/ https://www.flipkart.com/ https://react-hn.appspot.com/ https://mobile.twitter.com/ 部分可能需要自备梯子,另外建议在 Chrom

Sublime Text 3 搭建 React.js 开发环境

ublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展.关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展 安装 PC:Ctrl+shift+p Mac:Cmd+shift+p 打开面板输入babel安装 配置 打开.js, .jsx 后缀的文件; 打开菜单view, Synt

React.js 基础入门三 ---组件状态state

React 组件实例在渲染的时候创建.这些实例在接下来的渲染中被重复使用,可以在组件方法中通过 this 访问.唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存React.render 的返回值.在其它组件内,可以使用 refs 得到相同的结果(后面会简单解释refs). 从上几章的学习,我们可以这么理解组件,学过php的Yii框架的都知道widget组件,react.js定义一个组件,通过在组件中定义各种'方法','属性'最后通过render来渲染这个组件. 其中<组建

React.js 基础入门四--要点总结

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰. 1. HTML 标签 和 React 组件 在JS中写HTML标签,也许小伙伴们都惊呆了,那么React又是怎么区分HTML标签,React组件标签? HTML标签: var myDivEle

react.js

---恢复内容开始--- 一.React的定义 React 是由Facebook 创建的一个开源项目.它提供了一种在JavaScript中构建用户界面的全新方式.react针对的是现代风格的JavaScript开发生态系统.React 是一个使用JavaScript 和XML技术(可选)构建可组合用户界面的引擎.下面对React定义的每个部分加以详细的说明: React 是一个引擎:React的网站将它定义为一个库,但是我觉得使用"引擎"这个词更能体现出React的核心优势:用来实现响

要不要使用React JS呢 - Angular与ReactJS的整合

MVC(Model - View - Controller)模式无论是Web开发中的前端还是后端都是比较流行的模式,ReactJS位于前端MVC模式中的View层,最多有点Controller层的特性,相当于Javascript编写的Html模板.而Data Model和Data Binding是Angular的优势,所以需要Angular与ReactJS整合.不过Flux是适应ReactJS的数据绑定需求出现的一个库,支持单向数据绑定,https://facebook.github.io/fl

React.js终探（七）(完)

我们在前面介绍了组件的各种特性,这一节我们来说说多组件的情况. 在实际开发中,我们的组件难免会遇到有公共部分的情况,如果是个别情况还好,但如果数量比较多的话,那这时候,就需要公用了. 怎么公用呢? React为我们提供了它的方法. mixin:复用代码 可以把部分代码提出来公用.mixin是掺合混合的意思,即可以把一个对象的属性拷贝到另一个对象上. 使用mixin有两步: 定义一个mixin对象,即如 1 var EzLoggerMixin = { 2 log:function(){ 3 //s

React.JS概念介绍

概念 React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库. React只有很少的API,这使得它很容易去学习与理解.当然,使用它也是相当有意思的.但是,简约却并不简单.在我们开始之前,有一些概念是需要去理解的. React元素(React elements) React元素是用于呈现HTML结构的JavaScript对象.它们不会存在于浏览器中,只是用于描述浏览器中的元素,比如h1, div 或者 section等等. 模块(Components) 模