React 實踐記錄 01 組件開發入門

時間 2019-11-09

標籤 react 實踐記錄組件開發入門欄目 React 简体版

原文原文鏈接

Introduction

本文組成：javascript

Ryan Clark文章Getting started with React的翻譯。
博主的實踐心得。

React由Facebook的程序員建立，是一個很是強大的javascript類庫。
一個很大的賣點是virtual DOM機制，在DOM操做的性能上有較大的優點。
React社區經常介紹它爲MVC架構中的「V」，雖然說如此，若是將React與Flux(之後將會介紹)結合，咱們就能夠輕鬆實現M與V的同步。
在本文中，將會用到博主前兩天介紹的webpack。如下是博文連接：
webpack 學習筆記 01 使用webpack的緣由
 webpack 學習筆記 02 快速入門html

Components

經過React，咱們能夠專一於可複用的組件開發，好比：一個下拉導航欄組件，一個功能齊全的數據表格。React中，像CommonJs標準中同樣，React的組件與組件也能良好隔離，能夠隨意的在組件內部增長功能。
全部的React組件都須要實現一個函數: render，咱們能夠經過它，返回HTML或者調用其它的組件。正是這個基本的功能，給React帶來了無限可能。java

JSX

若是你曾經看過React相關的信息，那可能會對一個名詞印象比較深入：JSX。JSX使js無需""的包裝，編寫各種html tag。使得咱們能夠更快速的開發React組件(考慮到多行問題，在js中寫HTML本來仍是很麻煩的)。
咱們能夠藉助一個js庫，在瀏覽器中將JSX轉換爲js，但這不是推薦的作法，本文介紹瞭如何經過webpack在本地實現JSX到js的轉換，使得瀏覽器不用解決這一問題。node

Using JSX

render扮演着"ViewModel"的角色，在咱們返回HTML信息前，將Model注入View，並加入各種js邏輯。
如今，咱們新建一個目錄，創建如下文件react

index.html
entry.js
webpack.config.jswebpack

藉助npm與bower咱們能夠快速下載依賴項程序員

npm init   
npm install babel-loader --save
bower install react   
bower init

如下是index.html的內容，藉助webpack，咱們能夠不用再修改它，就完成本示例了。web

<html>
    <head>
        <meta charset="utf-8">
        <title>react demo</title>  
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

如下是webpack配置內容npm

module.exports = {
  entry: "./entry.js",
  output:{
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
  loaders: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }
  ]}
}

配置作好了，讓咱們開始第一個JSX。瀏覽器

var React = require("./bower_components/react/react.js");

var Widget = React.createClass({
  render:function(){
    return(
    <div>
      <h1>React with webpack</h1>
    </div>);
  }
});

React.render(<Widget />, document.body);

運行指令

webpack -w

能夠看到以下結果：

Using variables for attributes

如前文所說，React組件裏能夠加入任意的js邏輯，咱們能夠把剛纔的JSX改爲這樣：

var Widget = React.createClass({
  render:function(){
    var text = "React with webpack";
    return(
    <div>
      <h1>{text}</h1>
    </div>);
  }
});

Basics of a component

組件能夠維護本身做用域下的各種狀態值。使咱們得以複用各種組件。
當咱們經過向組件的attributes傳值時，他們會做爲properties而引用。這句話可能很差理解，咱們看下代碼：

var Widget = React.createClass({
  render:function(){
    var text = "";
    return(
    <div>
      <h1>{this.props.displayText}</h1>
    </div>);
  }
});

React.render(<Widget displayText="React with webpack"/>, document.body);

State

properties適合用在一次渲染，不須要改變的組件場景。在狀態須要動態改變的場合，咱們會用到state。經過this.setState 函數以改變狀態值，以後，組件會從新渲染(藉助virtual DOM機制，這一部分仍是蠻快的)。如下是Demo

var Widget = React.createClass({
  getInitialState: function(){
    return{
      number: 0
    };
  },
  increment: function(){
    this.setState({
      number: this.state.number + 1
    });
  },
  render: function(){
    return(
    <div>
      <h1>{this.state.number}</h1>
      <button onClick={this.increment}>Inc</button>
    </div>);
  }
});

顯示的數字將伴隨按鈕點擊上升。

The component lifecycle

全部的組件都是有生命週期的，這無疑爲咱們開發提供了很大的便利。好比剛纔例子中的getInitialState，只會在控件裝載(mount)後，調用一次。固然還有其它的生命週期函數：
componentWillMount在組件即將裝載前調用，能夠把Ajax放這。
componentDidMount在組件已經被渲染出了DOM後調用，這時，咱們能夠藉助this.getDOMNode取到跟節點，作一些後續工做。
componentWillUnmount組件被移除時，相關資源的清理工做，就得在這裏(如移除EventHandler，若EventHandler操做了不存在的組件，error天然就被拋出)。

Component Methods

經過getDefaultProps，咱們能夠爲properties提供默認值，即當properties沒有經過attributes傳入，這些默認值會派上用場。

var Widget = React.createClass({
  getDefaultProps: function(){
    return{
      number: 10
    };
  },
  render: function(){
    return(
    <div>
      <h1>{this.props.number}</h1>
    </div>);
  }
});

React.render(<Widget/>, document.body);

React並不提倡提供過多的模版功能，它提倡的是迴歸原始，好比：當咱們須要用到repeater。咱們能夠這樣：

var Widget = React.createClass({
  render: function(){
    var data =[1,2,3,4]; //請假設這是有用數據
    var content = data.map(function(item){
      return (<h2>{item}</h2>)
    });
    return(
    <div>
      <h1>{content}</h1>
    </div>);
  }
});