Chapter4: React.js

This section contain the following items:

• 1.Introduction

• 2.Getting started

• 3.JSX

• 4.life cycle

• 5.Data flow: prop vs. prop.children, state

• 6.Layout, Event Handing

• 7.Using JQuery in React

• 8.Using D3.js in React

• 9.Dynamic Routing

1.Introduction

React發源自Facebook的PHP框架XHP的一隻分支. XHP作為一個PHP框架, 旨在每次有請求進來時渲染整個畫面. React的產生就是為了把這種重新渲染畫面的PHP式工作流帶到客戶端應用中.

React本質上是一個狀態機, 他只關心兩件事:

1.更新DOM
 2.響應事件

React贏就贏在最小化了重繪, 並避免了不必要的DOM操作,這兩點都是公認的性能瓶頸

[reference]: React 引領未來的用戶介面開發框架

2.Getting started

1) Visit React.js website: https://facebook.github.io/react/docs/tutorial.html
  2) Download example
  3) just type "node server.js" and open broswer: localhotst:3000

3.JSX

3.1 what is JSX ?

3.2 複合組件

1.自定義組件
2.使用動態值
3.子節點

3.3 JSX跟HTML的差異

1.屬性
2.條件判斷
3.非DOM屬性
4.事件
5.註釋
6.特殊屬性
7.樣式

4.life cycle

可分為實例化, 存在期, 銷毀＆清理期:

• Initialization (實例化):

一個實例初次被創建時所調用的生命週期方法, 與其他各個後續實例被創建時所調用的方法略有不同.

• getDefaultProps():

  • 只有第一次創建時會被調用, 在創建任意组件时，我们可以通过getDefaultProps方法给他定義一些属性.

  • 当我们需要在render方法使用某些數據時，可以在getDefaultProps() 函数中定義這個属性,然後通过{this.props.style}來進行獲取:

  • 對象或數組都會在所有實例中共享

    class CustomizableText extends Component {
       constructor(props) {
         super(props);   
           this.style = {
           };
       }
       render() {
         return (
           <Text style ={[this.props.style]} >Hello</Text>
         )
       }
     };
     CustomizableText.propTypes = {
       style: React.PropTypes.Text.isRequred,
     };

  • 新版改為以下寫法:

    constructor(props) {
       super(props);   
       this.state = {
       };
    }

• getInitialState():

  • 當物件被調用時此方法會在寫入 DOM 之前被觸發，通常用來管理狀態的元件可以用這個方法初始化一些資料,用來初始化每個實例的state, 可以訪問到this.props

  • 當components完成render後, 可使用setState改變this.state的內容, 此時會重新render以達成動態改變畫面的效果

    this.setState({
       mykey:'my new value'
    });

  • 新版改為以下寫法:

    constructor(props) {
        super(props);   
        this.state = {
        };
     }

• componentWillMount():

  • render被調用前最後可以修改組件state的最後機會

  • 这個时候DOM结構已经渲染了.這個時候就可以初始化其他框架的設置了,如果利用jQuery绑定事件等等.

• render():

  • 此函數將創建虛擬DOM

  • 是唯一一個必須的方法

  • 必須滿足下面幾點:

    • render返回的並不是真正的DOM, 而是一個虛擬的表現, React將會將他與真實的DOM做對比, 來判斷是否有必要作出修改.

• componentDidMount():

  • 當元件被寫入 DOM 之後觸發。當初始化需要操作 DOM 元素就可以用這個方法

  • 可以在這邊使用getDOMNode()

  2) Props Changes, State Changes (存在期):

• componentWillReceiveProps(nextProps)

• shouldComponentUpdate(nextProps, nextState)

• componentWillUpdate(nextProps, nextState)

• render()

• componentDidUpdate(prevProps, prevState)

3) Unmounting (銷毀＆清理期):

componentWillUnmount

reference:

1) http://andyyou.logdown.com/posts/370308
  2) http://busypeoples.github.io/post/react-component-lifecycle/
  3) https://www.kirupa.com/react/component_lifecycle.htm
  4) http://andyyou.logdown.com/posts/178998-reactjs-assembly-operation-and-life-cycle
  5) https://staminaloops.github.io/undefinedisnotafunction/understanding-react/

5.Data flow: prop vs. prop.children, state

• prop: property的縮寫

• 1.this.prop:

  • 指定單一個由上層元件所傳入的參數, 需寫在標籤內 (字串符)

        var Parent = React.createClass({
          render: function(){
            return(
              <div>
                {this.props.childrenA}
              </div>
            );
          }
        });
        var Root = React.createClass({
            render: function(){
              return(
                <Parent childrenA={ChildrenA}/>
              );
            }
        });
        React.render(<Root />, document.getElementById('app'));

• 2.this.prop.children

  • 上層元件所傳入的參數陣列, 寫在標籤的內容中

        var Parent = React.createClass({
            render: function(){
                return(
                  <div>
                      {this.props.children}
                  </div>
                );
            }
        });
        var Root = React.createClass({
            render: function(){
              return(
                <Parent >
                  <ChildrenA />
                  <ChildrenB />
                  <ChildrenC />
                </Parent>
              );
            }  
        });
    
        React.render(<Root />, document.getElementById('app'));

• 3.propTypes:

  • propTypes 使用來規範元件Props的型別與必需狀態

    • 當父元件沒有提供props的屬性時，可以採用getDefaultProps，

      預設props屬性的方式，讓元件使用預設的設定值，確保有props帶入。

  • React.PropTypes 的種類:

    • React.PropTypes.array // 陣列

    • React.PropTypes.bool.isRequired // Boolean 且必要。

    • React.PropTypes.func // 函式

    • React.PropTypes.number // 數字

    • React.PropTypes.object // 物件

    • React.PropTypes.string // 字串

    • React.PropTypes.node // 任何類型的: numbers, strings, elements 或者任何這種類型的陣列

    • React.PropTypes.element // React 元素

    • React.PropTypes.instanceOf(XXX) // 某種XXX類別的實體

    • React.PropTypes.oneOf(['foo', 'bar']) // 其中一個字串

    • React.PropTypes.oneOfType([React.PropTypes.string,

    • React.PropTypes.array]) // 其中一種格式類型

    • React.PropTypes.arrayOf(React.PropTypes.string) // 某種類型的陣列(字串類型)

    • React.PropTypes.objectOf(React.PropTypes.string) // 具有某種屬性類型的物件(字串類型)

    • React.PropTypes.shape({ // 是否符合指定格式的物件

      color: React.PropTypes.string,

      fontSize: React.PropTypes.number

      });

    • React.PropTypes.any.isRequired // 可以是任何格式，且必要。

• state與props的差別是在於state只存在組件的內部

• this.state -> 同層物件

  • 1.this.setState

    setState is done to 'set' the state of a value, even if its already set

    in the 'getInitialState' function.

  • 2.this.replaceState

    The replaceState() method is for when you want to clear out the values

    already in state, and add new ones.

• this.props -> 上層物件

reference: http://stackoverflow.com/questions/23293626/setstate-vs-replacestate-in-react-js http://jamestw.logdown.com/posts/257890-257890-reactjs-prop

6. Layout, Event Handing

• 1.將影像佈滿背景:

   var styles = StyleSheet.create({
    backgroundImage: {
      flex: 1,
      alignSelf: 'stretch',
      width: null,
    }
   });

7.Using JQuery in React

• 1.Install Jquery

  npm install jquery --save

• 2.Use AJAX by JQuery

  • 1.Import:

    import $ from 'jquery';

  • 2.Call AJAX API

    componentDidMount() {  
      this.serverRequest = $.get("https://jenhsuanhsieh.ddns.net:3000/gitbook", function (result) {})  
     }  
     componentWillUnmount\(\) {  
        this.serverRequest.abort\(\);  
     }

• 3.webpack.config.js

    module: {  
      plugins: [  
       new webpack.ProvidePlugin({  
          $: "jquery",  
         jQuery: "jquery"  
        })  
     ]  
    }

8.Using D3.js in React

• 1.install d3

    npm install d3 --save

• 2.Import d3

    import d3 from 'd3';

• 3.Basic structure could contain: constuctor(), componentDidMount(), componentWillReceiveProps(), render()

  • 1.put svg and its d3 components in render(), such as Arc, circle.

  • 2.put parameters that you would like to pass to render() by this.props and this.state, you can initial them in constructor()

  • 3.After components mounted, you can do something to change UI or event trigger something, do in componentDidMount()

     class WsDonut extends Component {
     constructor(props) {
      super(props);
      this.state = {
      };
     }

     componentDidMount() {
     //do something after render was done
       d3.select("svg").selectAll("path")
       .on("mouseover", function(d,i) {
        // mouse over handler
       }.bind(this) )
       .on("mouseout", function(d,i) {
        //mouse out handler
       }.bind(this) )
       .on("mouseclick", function(d,i) {
        //mouse click handeler
       }.bind(this) );
     }
     componentWillReceiveProps(){
     //do something when props was changed
     }

     render() {
       return (
       <svg width={} height={} >
         <g>
          <Arc
           path={}{}
           stroke={}
           fill={}
           width={}
           height={}
           key={} />
        <circle
           r="6"
           cx={} 
           cy={}
           fill={}
           key={}/>
      </g>
      <text
       x={}
       y={}>
      </text>
    </svg>
   );
  }

9.Dynamic Routing

• 1.Introduction

  • 要完成SPA (Single Page Application)不可或缺的就是dynamic routing, 在React的生態系中可以使用react-route這個套件來協助我們完成.

• 2.Install package

  npm install react-route --save

• 3.Setting

  • Main Entry

    • 定義routing rule及URL的宣告方式

      • 1.import package

        import {
          Router,
          Route,
          browserHistory
        } from 'react-router'

      • 2.宣告routing的components

        • 舉例來說, 假設我們有三個Page需要做routing, 便需要定義在Main Entry中

          • 1.Router, History

          • 2.Route

            render((
            <Router history={browserHistory}>
                <Route path="/" component={Page1}/>
                <Route path="/Page2" component={Page2}/>
                <Route path="/Page3" component={Page3}/>  
            </Router>

            ), document.getElementById('container'))

  • 導覽列 (nav bar或button)

    • 連結到routing components