HTML模板如下
<html>
<head>
<title>React App</title>
</head>
<body>
<div id='title'></div>
<div id='content'></div>
</body>
</html>
JavaScript代码如下
function renderApp(newAppState, oldAppState = {}) {
if (JSON.stringify(oldAppState) === JSON.stringify(newAppState)) return;
renderTitle(newAppState.title, oldAppState.title)
renderContent(newAppState.content, oldAppState.content)
}
/**
* 渲染应用标题
* 如果标题没更新，则直接返回，避免重新渲染
*/
function renderTitle(newTitle, oldTitle) {
if (oldTitle === newTitle) return
const titleDOM = document.getElementById('title')
titleDOM.innerHTML = newTitle.text
titleDOM.style.color = newTitle.color
}
function renderContent(newContent, oldContent) {
if (oldContent === newContent) return
const contentDOM = document.getElementById('content')
contentDOM.innerHTML = newContent.text
contentDOM.style.color = newContent.color
}
/**
* 初始化页面数据和修改数据
*/
function stateChanger(state, action){
if (!state) {
return {
title: {
text: 'React.js 小书',
color: 'red',
},
content: {
text: 'React.js 小书内容',
color: 'green'
}
}
}
switch (action.type) {
case 'UPDATE_TITLE_TEXT':
return {
...state,
title: {
...state.title,
text: action.text
}
}
case 'UPDATE_TITLE_COLOR':
return {
...state,
title: {
...state.title,
color: action.color
}
}
case 'UPDATE_CONTENT_TEXT':
return {
...state,
content: {
...state.title,
text: action.text
}
}
case 'UPDATE_CONTENT_COLOR':
return {
...state,
content: {
...state.title,
color: action.color
}
}
default:
return state
}
}
/**
* 创建 dispatch,subscribe 和 getState
*/
function createStore(reducer) {
let state = null
const Listeners = []
const subscribe = listener => Listeners.push(listener)
const getState = () => state
const dispatch = action => {
state = reducer(state, action)
Listeners.forEach(n => n())
}
dispatch({})
return {
getState,
dispatch,
subscribe
}
}
const store = createStore(stateChanger)
let oldState = store.getState()
renderApp(oldState)
store.subscribe(() => {
const newState = store.getState()
renderApp(newState, oldState)
oldState = newState
})
setTimeout(()=>{
store.dispatch({
type: 'UPDATE_TITLE_TEXT',
text: '哈哈哈'
})
store.dispatch({
type: 'UPDATE_TITLE_COLOR',
color: 'blue'
})
}, 2000)
