作者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/cn.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