细说React(一)

时间 2019-12-10

标签细说 react 栏目 React 繁體版

原文原文链接

React 是近期很是热门的一个前端开发框架。这篇文章将介绍如何使用 React 来建立用户界面，但愿可以起到抛砖引玉的效果。html

"React, A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES"前端

正如官网的介绍，一个框架，Just the UI。React的API相对于庞大Angular来讲比较简单，可是精简的 API 不是意味着没有必定的学习成本，咱们仍是须要对此框架进行必定的理解。闲话很少说，让咱们进入正题。首先，让咱们来了解下 React 中使用到的一些术语。react

React 术语

React Elementsgit

表明 HTML 元素的 JavaScript 对象。这些 JavaScript 对象最后被编译成对应的 HTML 元素。github
Components算法

封装 React Elements，包含一个或者多个 React Elements。 Components 用于建立能够复用的 UI 模块，例如分页，侧栏导航等。浏览器
JSXbabel

JSX 是 React 定义的一种 JavaScript 语法扩展，相似于 XML 。 JSX 是可选的，咱们彻底可使用 JavaScript 来编写 React 应用，不过 JSX 提供了一套更为简便的方式来写 React 应用。app
Virtual DOM框架

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。
DOM Diff

React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让咱们能够无需担忧性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操做。

DEMO 环境准备

首先，在 React Download 页面下载 Starter Kit，解压到某个地方。

进入到解压后的 build 目录，新建一个 index.html 文件，而且引用 react.js , react-dom.js(0.14版本以前react和react-dom没有分家，0.14以后将二者分开，react－dom只提供了一个渲染的方法)和 JSXTransformer.js(官方现不建议使用JSXTransformer.js，建议使用babel，配合ES6,写起来很是爽) 后就能够开始编写 React 应用了。须要注意若是使用 JSX，那么 script 标签的 type 应该更改成 text/jsx。

<html>
  <head>
    <meta charset="utf-8" >
    <title>demo</title>
  </head>
  <body>
    <script src="react.js"></script>
　　 <script src="react-dom.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx" src="app.js"></script>
  </body>
</html>

第一个 React Element

建立一个 Element 只需调用 React.createElement 方法，并传入元素信息便可。例如：

var div = React.createElement('div', null, "Hello React");
 // 使用 JSX
var div = <div>Hello React</div>

建立以后就能够调用 React.render 方法渲染到页面上：

ReactDOM.render(div, document.body);

第一个 React Component

React Component 抽象出相同 UI 组件的结构和逻辑。经过调用 React.createClass 方法来建立一个 Component，并传入一个带有 render 方法的对象类型的参数。

var HelloMessage = React.createClass({ render: function () { return <div>Hello {this.props.name}</div>;
 } }); ReactDOM.render(<HelloMessage name="iissnan" />, document.body);

咱们看到 React.createClass 接收了一个对象，并将这个方法返回赋值给 HelloMessage，最后调用 ReactDOM.render 方法将这个新建的 Component 渲染到页面上。从这个例子看来，一个 Component 与 Element 并没有太大的差异。事实上， Component 已经准备好了，咱们能够增添一些结构和功能来扩展这个 Component 。

Props

在上一个例子中，能够看到有一个特殊的引用： this.props.name。这个引用称之为 Props，能够将他想象成 Component 的设置选项。

在使用上， Props 相似于 HTML 中的属性：

ReactDom.render(<HelloMessage name="foo" />, document.body);

在 Component 内部，经过 this.props.name 来引用这个 Props：

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

须要注意的是， Props 仅用来定制 Component，这些数据不该该被改动。若是涉及到须要作改动的数据，得考虑使用state。

Stateful Component

State 数据表明 Component 的状态，用于维护 Component 内部的状态。当 State 发生改变以后， React 将会从新渲染 UI 。调用与 Props 相似， State 数据经过 this.state 访问：

var Greeting = React.createClass({ getInitialState: function () { return { greeted: false }; }, greet: function () { this.setState({ greeted: true }); }, render: function () { var response = this.state.greeted ? 'Hi' : ''; return ( <div>
        　　<div>Hello {this.props.name}</div>
        　　<span>{response}</span>
        　　<button onClick={this.greet}>Hi</button>
      　　</div>
 ); } }); ReactDOM.render(<Greeting name="foo" />, document.body);

这个例子中加了几个函数，咱们一一来看下。首先是 getInitialState ，这个方法在 Component 初始化的时候被调用，返回 Component 初始时的状态数据。例子中，咱们设置了 Component 初始时的 greeted 为 false。
而后是 greet 方法，这个方法被调用以后将修改状态数据 greeted 为 true。

当 State 发生改变后， React 将 Component 渲染到 Virtual DOM，新的 Virtual DOM 与旧版本的进行比对，检查出改变的部分并更新浏览器的 DOM。在这个例子中，当按钮被点击后， greeted状态数据发生了变化，UI 跟随着更新。

组合

结合 Props 和 State，咱们就可使用 Component 来建立完整的应用。

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';

    return (
      <div>
        <div>Hello {this.props.name}</div>
        <span>{response}</span>
        <button onClick={this.greet}>Hi</button>
      </div>
    );
  }
});

var users = ["foo", "bar", "baz"];

var GreetingApp = React.createClass({
  render: function () {
    var greetings = this.props.users.map(function (user) {
      return <Greeting name={user} />;
    });

    return <div>{greetings}</div>;
  }
});

ReactDOM.render(<GreetingApp users={users} />, document.body);

最后

打个小广告，github上提供demo演示，项目地址--react学习，欢迎star！但愿能对你有所帮助！