我将vanilla JS用于交互式网页,我试图了解我的设计模式是否正确实现了react 性原则.
(注意:我不是指图书馆的react ——尽管我很高兴能从这些图书馆的特点或策略中得到答案).
我的基本理解是,你有一些数据作为你唯一的真理来源,你倾听变化,当数据变化时,你的页面|应用程序|组件重新呈现以反映这一点.
下面是我所做工作的简化版本,后面有问题.
假设我有唯一的真理来源:
let data = {}
data.someContent = 'Hello World'
data.color = 'red'
以及用于动态渲染的模板字符串中的我的应用程序标记:
function template(data) {
return `
<div id="app" style="color:${data.color}">${data.someContent}</div>
`
}
// assume there are also plain HTML inputs on the page, outside of what gets re-rendered.
基于数据进行渲染的函数:
function render(data) {
document.getElementById('app').innerHtml = template(data)
}
然后,对于客户端更新的等效react 性:
document.addEventListener('input', (e) => {
data[e.target.id] = e.target.value // update data to reflect input
render(data) // re-render based on new data
})
从服务器端更新:
function fetchDataAndReRender() {
data.propToUpdate = // fetch data from server
render(data) // again, re-render
return
}
因此,我们得到了唯一的真实来源,并基于数据更新重新渲染.
- 除了数据、侦听器和渲染三者之外,还有其他支柱吗?
- 我知道库通常直接侦听
data
对象上的更改,例如通过代理.这样做的唯一好处似乎是避免手动拨打render()
.对吗?