我将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().对吗?

推荐答案

这里我缺少的主要内容是优化重新渲染的方法.

与DOM交互的成本很高,因此除了在数据/状态周围使用Proxy来自动调用render之外,如果只有一个元素或一个属性发生了更改,您最好不要只替换应用程序的所有HTML:

  • 考虑更新一个<input>.如果您无法检测到只有它的值发生了更改并进行了更新,而是替换了包含此输入的整个HTML,则光标将在每次重新渲染后移动到末尾(因此可能在我键入的每个字符之后).

  • 考虑阻力(&a);拖放功能.如果您无法检测到用户在屏幕上拖动某个内容,并且只更新其上的CSS transform属性,而替换包含被拖动元素的整个HTML,那么性能将非常糟糕.此外,您将中断拖动事件,因此这根本不起作用.

另一种可能的优化方法是批量更新,因此如果您连续更新数据3次,则可能只会更新一次HTML,并得到最终结果.你已经提到过你debounce 连续输入事件,这将是一种方法.

回答您的意见:

(1) 我假设您想要一个通用的解决方案,在这个解决方案中,必须能够检测到更改并只更新DOM中需要更新的部分.

如果您只需要(重新)呈现HTML的小静态块,那么您可能不需要这样做.主要的两个原因是:

  • 正如你所说,没有互动性,所以你不会遇到我举例说明的问题.

  • 由于更新量较小,通过替换HTML块而不是try 更新DOM中的现有元素,不太可能看到任何性能问题.

(2) 在任何情况下,如果仅try 更新发生了更改的内容,您将不得不面对的主要问题不是查找已更改的数据(无论是否使用代理),而是将其映射到需要更新的元素以及执行这些更新的操作.

(3) 你也可以在应用程序方面做出妥协,比如说,数据必须是不可变的(比如React).

Javascript相关问答推荐

还原器未正确更新状态

S文本内容和值不必要的不同

当id匹配时对属性值求和并使用JavaScript返回结果

WP Bootstrap NavWaker:下拉菜单一次打开所有下拉菜单

从另一个数组中的对应行/键值对更新数组中的键值对对象

钛中的onClick事件需要在两次点击之间等待几秒钟

OpenAI转录API错误请求

以编程方式聚焦的链接将被聚焦,但样式不适用

令牌JWT未过期

是否可以将Select()和Sample()与Mongoose结合使用?

判断函数参数的类型

按特定顺序将4个数组组合在一起,按ID分组

在没有任何悬停或其他触发的情况下连续交换图像

表单数据中未定义的数组键

无法在Adyen自定义卡安全字段创建中使用自定义占位符

错误400:当我试图在React中使用put方法时,该字段是必需的

CSS网格使页面自动滚动

打字脚本中的函数包装键入

我正在为我的单选按钮在HTML中设置一个值.使用Java脚本,我如何才能获得该值?

如何限制调整最小高度并转换为纯Java脚本