javascript - 如何将组件绑定(bind)到动态外部状态？

Question

如何实现以下数据绑定(bind)？

const Component = ({state}) => (
  <div>
    {state.counter} // I want this to update every second.
  </div>
);

// Some dynamically updating data.
const myData = {
  counter: 0,
}

render(
  <Component state={myData} />,
  document.body
);

setInterval(() => {
  myData.counter++; // Simulate dynamic updates.
}, 1000);

我已经测试了 React，但是 DOM 没有更新，因为我不想手动强制 React 重新渲染。

Answer 1

Vue 开箱即用地支持此功能:

const state = { counter: 0 }

setInterval(() => state.counter++, 1000)

new Vue({
  el: '#app',
  data: state
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  {{ counter }}
</div>

I've tested React, but the DOM doesn't update because I don't want to manually force React to re-render.

框架需要知道数据何时发生变化才能重新渲染 View 。 Vue 通过使用响应式 getter 和 setter 透明地包装数据对象的每个属性来实现此目的，以便它可以跟踪对象的更改。 React 不会这样做，相反，您必须使用 setState 之类的方法来改变数据，以便 React 知道某些内容发生了变化。我对 React 不是很熟悉，所以我无法给你一个 React 示例。