React 中文版

React_Image.svg
React_Image.svg

React 是 Facebook 推出的一個用來構建用戶界面的 JavaScript 庫。具備以下特性：

  • 不是一個 MVC 框架
  • 不使用模板
  • 響應式更新非常簡單
  • HTML5 僅僅是個開始

僅僅是 UI

許多人使用 React 作為 MVC 架構的 V 層。 盡管 React 并沒有假設過你的其余技術棧， 但它仍可以作為一個小特征輕易地在已有項目中使用

虛擬 DOM

React 為了更高超的性能而使用虛擬 DOM 作為其不同的實現(xiàn)。 它同時也可以由服務端 Node.js 渲染 － 而不需要過重的瀏覽器 DOM 支持

數(shù)據(jù)流

React 實現(xiàn)了單向響應的數(shù)據(jù)流，從而減少了重復代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

一個簡單的組件

React 組件通過一個render()方法，接受輸入的參數(shù)并返回展示的對象。

以下這個例子使用了 JSX，它類似于XML的語法

輸入的參數(shù)通過render()傳入組件后，將存儲在this.props

JSX 是可選的，并不強制要求使用。

點擊 "Compiled JS" 可以看到 JSX 編譯之后的 JavaScript 代碼

Live JSX Editor

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

Compiled JS

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

一個有狀態(tài)的組件

除了接受輸入數(shù)據(jù)（通過 this.props ），組件還可以保持內(nèi)部狀態(tài)數(shù)據(jù)（通過 this.state ）。當一個組件的狀態(tài)數(shù)據(jù)的變化，展現(xiàn)的標記將被重新調(diào)用 render() 更新。

Live JSX Editor

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});
 
React.render(<Timer />, mountNode);

Compiled JS

var Timer = React.createClass({displayName: "Timer",
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      React.createElement("div", null, "Seconds Elapsed: ", this.state.secondsElapsed)
    );
  }
});

React.render(React.createElement(Timer, null), mountNode);

一個應用程序

通過使用props和state, 我們可以組合構建一個小型的 Todo 程序。

下面例子使用state去監(jiān)測當前列表的項以及用戶已經(jīng)輸入的文本。 盡管事件綁定似乎是以內(nèi)聯(lián)的方式，但他們將被收集起來并以事件代理的方式實現(xiàn)。

Live JSX EditorCompiled JS

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
 
React.render(<TodoApp />, mountNode);

Compiled JS

var TodoList = React.createClass({displayName: "TodoList",
  render: function() {
    var createItem = function(itemText) {
      return React.createElement("li", null, itemText);
    };
    return React.createElement("ul", null, this.props.items.map(createItem));
  }
});
var TodoApp = React.createClass({displayName: "TodoApp",
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      React.createElement("div", null, 
        React.createElement("h3", null, "TODO"), 
        React.createElement(TodoList, {items: this.state.items}), 
        React.createElement("form", {onSubmit: this.handleSubmit}, 
          React.createElement("input", {onChange: this.onChange, value: this.state.text}), 
          React.createElement("button", null, 'Add #' + (this.state.items.length + 1))
        )
      )
    );
  }
});

React.render(React.createElement(TodoApp, null), mountNode);

一個使用外部插件的組件

React 是靈活的，并且提供方法允許你跟其他庫和框架對接。

下面例子展現(xiàn)了一個案例，使用外部庫 Markdown 實時轉化 textarea 的值。

Live JSX Editor

var converter = new Showdown.converter();
 
var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Type some *markdown* here!'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.getDOMNode().value});
  },
  render: function() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={{
            __html: converter.makeHtml(this.state.value)
          }}
        />
      </div>
    );
  }
});
 
React.render(<MarkdownEditor />, mountNode);

Compiled JS

var converter = new Showdown.converter();

var MarkdownEditor = React.createClass({displayName: "MarkdownEditor",
  getInitialState: function() {
    return {value: 'Type some *markdown* here!'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.getDOMNode().value});
  },
  render: function() {
    return (
      React.createElement("div", {className: "MarkdownEditor"}, 
        React.createElement("h3", null, "Input"), 
        React.createElement("textarea", {
          onChange: this.handleChange, 
          ref: "textarea", 
          defaultValue: this.state.value}), 
        React.createElement("h3", null, "Output"), 
        React.createElement("div", {
          className: "content", 
          dangerouslySetInnerHTML: {
            __html: converter.makeHtml(this.state.value)
          }}
        )
      )
    );
  }
});

React.render(React.createElement(MarkdownEditor, null), mountNode);

快速入門

下載 React v0.13.0

本教程部分內(nèi)容來源于 React 中文網(wǎng) - reactjs.cn
React 官網(wǎng)：http://facebook.github.io/react/

更新日期 更新內(nèi)容
2015-04-10 React 中文版發(fā)布

版本信息

書中演示代碼基于以下版本：

語言/框架 版本信息
react 0.13.1

課程目錄

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學習指南，這只是我在學習過程中的一些閱讀筆記，個人覺得該教程講解深入淺出，比目前大...
    leonaxiong閱讀 2,944評論 1贊 18
  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,183評論 2贊 35
  • 最近看了一本關于學習方法論的書，強調(diào)了記筆記和堅持的重要性。這幾天也剛好在學習React，所以我打算每天堅持一篇R...
    gaoer1938閱讀 1,812評論 0贊 5
  • 這是屬于·科瓦伊·萊納德的黃金時代。 在職業(yè)生涯的第六個年頭，他已經(jīng)成為一支王牌球隊當仁不讓的核心了——在他身后，...
    ThuleWang閱讀 237評論 0贊 0
  • 剛剛知道班級里兩個男生過了大連海事的初試，兩個司考c證都遠沒有拿到而考研只用兩個月時間的準備的男生。我在想，是不是...
    依然井柏然閱讀 193評論 0贊 0

友情鏈接更多精彩內(nèi)容