当商店发出任何不断变化的事件时，何时以及如何重新渲染？

Question

我是react + flux的新手。当商店发出事件时，我对何时以及如何重新渲染感到有点困惑。在我的应用程序中，我正在监听函数 componentWillMount() 中的一个事件，该事件在渲染发生之前被调用。它工作正常，我的观点正在更新。我只关心过是什么导致我的组件重新渲染。下面是代码。

函数更新商店

 createTodo(text){
const id = Date.now();
this.todos.push({
    id,
    text,
    complete:false
});

this.emit("change");

我的组件 -- 监听器方法。

componentWillMount(){

TodoStore.on("change", () => {
    this.setState({
        todos: TodoStore.getall()
    })
})
}

这里是什么导致我的组件重新呈现？能否请您详细解释一下。

Answer 1

每次调用 setState 组件都会重新渲染。

参见：https://facebook.github.io/react/docs/component-api.html

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

Answer 2

每当您在 React 应用程序中调用 setState() 时，它都会导致状态呈现。基本上每次状态改变时，你的反应组件内的渲染函数都会被执行，你的 UI 将反映新的变化

当商店发出任何不断变化的事件时，何时以及如何重新渲染？

When and how does re-rendering happens when stores emits any event in flux?

javascript

flux

reactjs

react-jsx

reactjs-flux