Re: [問題] react component 如何使用"外部"的值
※ 引述《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://www.ptt.cc/bbs/Ajax/M.1487791247.A.802.html
推
02/23 14:31, , 1F
02/23 14:31, 1F
→
02/23 14:32, , 2F
02/23 14:32, 2F
→
02/23 14:33, , 3F
02/23 14:33, 3F
→
02/23 14:57, , 4F
02/23 14:57, 4F
→
02/23 14:57, , 5F
02/23 14:57, 5F
推
02/23 15:15, , 6F
02/23 15:15, 6F
推
02/24 16:00, , 7F
02/24 16:00, 7F
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
