作者keev (a)
看板Ajax
標題[問題] react component 如何使用"外部"的值
時間Wed Feb 22 20:48:41 2017
我在寫一個遊戲
希望game logic 和 view 能夠儘量分開
也就是說 game 獨立出一個物件
var game = new Game()
...
game.getCash()
game.nextMonth()
即使沒有實做畫面也可以正常運行
但另一方面
react 把變數放在 state 或 prop
無法用「外面的」變數去改變 state或prop
有種encapsulation 的感覺
那要如何把遊戲邏輯獨立出來 但又同時使用 react呢？
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.141.166.216
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1487767724.A.7A7.html
1F：推 async: 用redux? 02/22 22:06
2F：推 mrbigmouth: 如果你的game物件不包含任何資料(資料放store裡) 02/23 10:45
3F：→ mrbigmouth: 只是用來呼叫方法的物件 可以把game放在根container 02/23 10:46
4F：→ mrbigmouth: 的context裡面 需要的子view再用context取得game來 02/23 10:46
5F：→ mrbigmouth: 呼叫方法 02/23 10:46
7F：推 mrbigmouth: 如果game物件包含資料 就只能把game做成可被訂閱的 02/23 10:49
8F：→ mrbigmouth: store了 02/23 10:49
redux 和context 看過一遍了
但大概要再看十遍才會看懂
現在找到一個方法 從todomvc react 看到的
看到時晴天霹靂
因為他的方法是每次model改變時去呼叫
ReactDOM.render(<App model={model} />, reactRoot)
難道這種方式才是 the react way ?
// Game.js
class Game(){
constructor(){
game.render = function(){}
}
subscribe(render){
this.render = render
}
addCash(){
...
this.render()
}
}
// App.js
class App extends React.Component{
...
}
var game = new Game()
function render() {
ReactDOM.render(
<App model={game}/>,
document.getElementsById('game-root')
);
}
game.subscribe(render)
render()
※ 編輯: keev (111.251.139.238), 02/23/2017 15:05:55