React/Redux 起手式

傅耀德

創科工程師

今天學習的重點

認識 React
React 跟普通 Html jquery 差異
React 簡單實作

為什麼要學習 React

它像健達出奇蛋一樣

Learn once write anywhere

~~Debug anywhere~~

Web
IOS
Android

時機已經成熟了

版號大躍進 0.14.0 --> 15

他們是這樣說的「這樣有助於對穩定性的承諾，並提供了靈活性，能夠在小版本中添加向後兼容的特性」

潮！

認識 REACT

傳統網頁跟 Single page

Components ( Class)

單一責任原則
可重複使用的元件
方便測試
內部狀態、處理邏輯、事件處理、內部的樣式

class Hello extends React.Component {
  render() {
    return (
      <div>Hello Trunk Studio</div>
    )
  }
}

舉一個例子

Virtual Dom

不用自己處理 Dom
更有效率更滑順，神秘的 Diff

Prop

Component 的 config

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

class Hello extends React.Component {
  render() {
    return (
      <div>
        <div>Hello Trunk Studio</div>
        <HelloWho name={'耀德'}/>
        <HelloWho name={'Dmoon'}/>
      </div>
    )
  }
}

Hello Trunk Studio
Hello 耀德 !!
Hello Dmoon !!

props 給予預設值

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

HelloWho.defaultProps = {
  name: 'Trunk Studio'
}

class Hello extends React.Component {
  render() {
    return (
      <div>
        <HelloWho />
        <HelloWho name={'耀德'}/>
        <HelloWho name={'Dmoon'}/>
      </div>
    )
  }
}

Hello Trunk Studio !!
Hello 耀德 !!
Hello Dmoon !!

State

使用 setState(data)
更改 State 後畫面就會自動更新

如果使用 jquery 就會長這樣

$('input').bind('input', function() {
  var input = 'Hello ' + $(this).val() + ' !!!';
  $('#helloDiv').text(input);
});

哪些 Component 需要有 State？

用戶輸入
server request
時間變化等做出響應

其餘應該都使用 props 傳遞給子 Component

什麼東西需要放在 State？

State 應該包括那些可能被 Component 的事件處理器改變並觸發用戶界面更新的數據

用戶輸入
server request
時間變化等做出響應

什麼東西不需要放在 State？

React Component
基於 props 的重複數據
可以使用 state、prop 算出來的值

React 生命週期

元件初始化

給予初始值 defaultProps

componentWillMount ()

render()

componentWillMount ()

使用 setState 會立即更新 state，不會再次 render

render 後觸發

適合用來掛其他 javascript framwork

React 生命週期

更新

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate(nextProps, nextState)

componentDidUpdate (prevProps, prevState)

render()

class Hello extends React.Component {
  render() {
  
    let names = ['Alice', 'Emily', 'Kate'];

    return (
     <div> 
       {
         names.map(function (name) {
           return <div> Hello, {name}! </div>
         })
       }
     </div>
    )
  }
}

React.render(<Hello />, document.getElementById('demo'));

Hello, Alice!
Hello, Emily!
Hello, Kate!

一個小 Sample

一個看起來比較大的 Sample

直接 Clone 回家試試看

常見新手錯誤一

腦袋轉不過來！！

class Hello extends React.Component {
  
  inputName(e){
    this.refs.show.value = e.target.value
  }
  
  render() {
    return (
      <div>
        <input type="text" ref='show' value="預設值" disabled />  
        <input type="text" onChange={this.inputName.bind(this)} />  
      </div>
    )
  }
}

React.render(<Hello />, document.getElementById('demo5'));

一開始一定會卡住的地方

class Hello extends React.Component {
  
  render() {
    return (
      <div>錯誤示範請勿模仿</div>  
      <input type="text" />  
    )
  }
}

React.render(<Hello />, document.getElementById('demo6'));

一開始一定不知道怎麼註解

class Hello extends React.Component {
  
  render() {
    return (
      <div>

        {/* <div> 註解範例 </div> */}

        // <div> 這樣是錯的 </div>
        /* <div> 這樣是錯的 </div> */
        <!-- <div> 這樣也是錯的 </div> -->

      </div> 
    )
  }
}

React.render(<Hello />, document.getElementById('demo7'));

一些 UI Components 的集散地

Q & A

React/R

By fuyaode

React/R

2,898

fuyaode