作者davidsky (Alive)
看板Ajax
标题Re: [问题] react component 如何使用"外部"的值
时间Thu Feb 23 03:20:43 2017
※ 引述《keev (a)》之铭言：
: 我在写一个游戏
: 希望game logic 和 view 能够尽量分开
: 也就是说 game 独立出一个物件
: var game = new Game()
: ...
: game.getCash()
: game.nextMonth()
: 即使没有实做画面也可以正常运行
: 但另一方面
: react 把变数放在 state 或 prop
: 无法用「外面的」变数去改变 state或prop
: 有种encapsulation 的感觉
: 那要如何把游戏逻辑独立出来 但又同时使用 react呢？
个人习惯的pattern
1. core logic 写在 xxx_store
当 store 状态发生改变时主动 emit event
2. view 去注册 store 的 change event 後做 setState
3. 使用者透过 UI 操作後去改 store 的状态,
然後再一次透过 change event 回到 view
store 就算之後不用 React 来绘制画面, 依然可以被其他 view library 所重用
import React from 'react';
import GameStore from './game_store'; // manage logic of the game
export default class GameView extends React.Component {
constructor(props) {
super(props);
this.state = GameStore.getAllData();
}
componentDidMount() {
GameStore.on('changed', () => {
this.setState(GameStore.getAllData());
});
}
onKeyDown(e) {
if ('F1' === e.key) {
GameStore.setScore(1);
}
}
render() {
return (
<div onKeyDown={(e)=>this.onKeyDown(e)}>
<div className="cash">{this.state.cash}</div>
<div className="time">{this.state.time}</div>
</div>
);
}
}
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.164.202.143
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1487791247.A.802.html
1F：推 keev: 你指的是 GameStore.emit() GameStore.on() 吗？ 02/23 14:31
2F：→ keev: 这是 nodejs的event library 02/23 14:32
3F：→ keev: 用webpack就可以在browser 上使用吗？ 02/23 14:33
4F：→ dododavid006: 那个 event library 网路上有 port 到 browser 的版 02/23 14:57
5F：→ dododavid006: 本可以用 02/23 14:57
6F：推 keev: 我的问题打的这麽笼统 还得到解答 感谢 02/23 15:15
7F：推 keev: 这里的 GameStore 是 global variable 吗 这样没问题吗? 02/24 16:00