日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

    
 

     
  
render:function(){ 
     
  
    return ( 
     
  
        
 
     
  
            定時(shí)器：{interval}

那如何使用coffee寫這段代碼呢？ 我們需要先將jsx編譯這類似這樣的js代碼，請注意是用大腦編譯：


    
 

     
  
render:function(){ 
     
  
    return React.createElement('div',null, 
     
  
        React.createElement('div',{className:'timer'},'定時(shí)器'+this.props.interval), 
     
  
        React.createElement('div',null,this.props.title), 
     
  
        React.createElement('input',{ref:'input'}), 
     
  
        React.createElement('button',null,'click it.') 
     
  
    ); 
     
  
} 
    
 

然后將js代碼逆向編譯為coffee。

這里我們可以用$代替React.createElement簡化代碼（終于可以用jQuery的坑位了），得益于coffee的語法，借助React.DOM可以用一種更簡單的方式實(shí)現(xiàn)：

{div,input,button,span,h1,h2,h3} = React.DOM


這里就不單獨(dú)放render部分，直接看完整代碼：


    
 

     
  
{Component,PropTypes} = React = require 'react' 
     
  
$ = React.createElement 
     
  
{div,input,button} = React.DOM 
     
  
 
     
  
class App extends Component 
     
  
    clickHandle:-> 
     
  
        dom = this.refs.input.getDOMNode() 
     
  
        this.props.actions.change(dom.value) 
     
  
        dom.value = '' 
     
  
    render:-> 
     
  
        {title,interval} = this.props 
     
  
        div className:'timer', 
     
  
            div null,'定時(shí)器：' + interval 
     
  
            div null,title 
     
  
            input ref:'input' 
     
  
            button onClick:@clickHandle.bind(this),'click it.' 
     
  
 
     
  
App.propTypes = 
     
  
    title: PropTypes.string 
     
  
    actions: PropTypes.object 
     
  
    interval: PropTypes.number 
     
  
 
     
  
module.exports = App 
    
 

如果你能看到并看懂這段coffee，并在大腦里自動編譯成js代碼再到j(luò)sx代碼，恭喜你。

連接store

這個(gè)環(huán)節(jié)的作用，主要是實(shí)現(xiàn)view層和store層的綁定，當(dāng)store數(shù)據(jù)變化時(shí)，可自動更新view。

這里需要使用redux提供的createStore方法創(chuàng)建一個(gè)store，該方法接受2個(gè)參數(shù)，reducer和初始的state（應(yīng)用初始數(shù)據(jù)）。

store.coffee的代碼如下：


    
 

     
  
{createStore} = require 'redux' 
     
  
reducers = require './reducers' # reducer 
     
  
state = require './state' # 應(yīng)用初始數(shù)據(jù) 
     
  
 
     
  
module.exports = createStore reducers,state 
    
 

然后我們在應(yīng)用的入口將store和App綁定，這里使用了redux官方提供的react-redux庫。


    
 

     
  
{Provider,connect} = require 'react-redux' 
     
  
store = require './store' 
     
  
$ = React.createElement 
     
  
mapState = (state)-> 
     
  
    state 
     
  
rootComponent = $ Provider,store:store,-> 
     
  
    $ connect(mapState)(App) 
     
  
React.render rootComponent,document.body 
    
 

可能有人會問，mapState和Provider是什么鬼？

mapState提供了一個(gè)類似選擇器的效果，當(dāng)一個(gè)應(yīng)用很龐大時(shí)，可以選擇將state的某一部分?jǐn)?shù)據(jù)連接到該組件。我們這里用不著，直接返回state自身。

Provider是一個(gè)特殊處理過的react component，官方文檔是這樣描述的：


    
 

     
  
This makes our store instance available to the components below. 
     
  
(Internally, this is done via React undocumented “context” feature,  
     
  
but it’s not exposed directly in the API so don’t worry about it.) 
    
 

所以，放心的用就好了。

connect方法用于連接state和App，之后即可在App組件內(nèi)部使用this.props.dispatch()方法了。

添加action和reducer

***我們添加一個(gè)按鈕點(diǎn)擊的事件和定時(shí)器，用于觸發(fā)action，并編寫對應(yīng)的reducer處理數(shù)據(jù)。

在前面的App內(nèi)部已經(jīng)添加了this.props.actions.change(dom.value)，這里看下action.coffee的代碼：


    
 

     
  
module.exports = 
     
  
    change:(title)-> 
     
  
        type:'change' 
     
  
        title: title 
     
  
    timer:(interval)-> 
     
  
        type:'timer' 
     
  
        interval:interval 
    
 

再看reducer.coffee


    
 

     
  
module.exports = (state,action)-> 
     
  
    switch action.type 
     
  
        when 'change' 
     
  
            Object.assign {},state,title:'hello ' + action.title 
     
  
        when 'timer' 
     
  
            Object.assign {},state,interval:action.interval 
     
  
        else 
     
  
            state 
    
 

至此，代碼寫完了。

一些其他的東西

這里只介紹一個(gè)中間件的思想，其他的特性例如異步action，或者dispatch一個(gè)promise等原理基本類似：

    
 

     
  
dispatch = store.dispatch 
     
  
store.dispatch = (action)-> 
     
  
    console.log action # 打印每一次action 
     
  
    dispatch.apply store,arguments 
    
 

由于時(shí)間關(guān)系，redux的一些特性和設(shè)計(jì)原理沒有展現(xiàn)出來，以后有時(shí)間再單獨(dú)講，完整的項(xiàng)目代碼，感興趣的同學(xué)可以看這里：請點(diǎn)我，或者直接找我聊。

項(xiàng)目用到了fis3作為構(gòu)建工具，使用fis3 release即可在本地查看效果。