React setState / Flux - 它是否总是触发重新渲染？

Question

我最近一直在玩 React Native，我对更恰当地管理我的状态产生了兴趣，作为在所有组件之间实现共享状态的开始。

答案当然是 Flux。在继续使用一些更高级的解决方案（例如 Redux、Alt、MobX）之前，我认为我应该先了解原始结构本身，并借助一个小工具，即 Flux 调度程序。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

import EventEmitter from 'EventEmitter';
import { Dispatcher } from 'flux';

class Store extends EventEmitter {
  list = [];

  actions = {
    add: title => dispatcher.dispatch({ type: 'add', payload: { title } })
  };

  handle = ({ type, payload }) => {
    switch(type) {
    case 'add': this.add(payload.title); break;
    }
  };

  add(title) {
    this.list.push(title);
    this.emit('change');
  }
}

const store = new Store(), dispatcher = new Dispatcher();

dispatcher.register(store.handle);

class App extends Component {
  state = { list: store.list };

  componentWillMount() {
    this.listener = store.addListener('change', () => this.setState({ list: store.list }));
  }

  componentDidMount() {
    setInterval(() => store.actions.add(new Date().getTime()), 1000);
  }

  componentWillUnmount() { this.listener.remove(); }

  render() {
    return (
      <View style={{ marginTop: 20 }}>
        <Text>{JSON.stringify(this.state.list)}</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('straightforwardFlux', () => App);

注意在视图层，我们有{JSON.stringify(this.state.data)}，当商店更新时，视图自然会重新渲染，因为它与状态相关联。

当更改为{JSON.stringify(store.data)} 时，视图也会重新渲染！这不应该发生，因为视图应该只在直接影响视图的状态发生变化时更新，在这种情况下，视图中没有呈现任何状态。我在这里错过了什么吗？为什么我们会遇到这种行为？

这就引出了另一个问题，每次状态变化时都会调用 render() 吗？即使它不影响视图层的外观？我对此进行了研究，得到了两个不同的答案，一个说是，componentShouldUpdate() 默认返回 true，这意味着需要在此处进行一些更改（如果是，如何进行？），另一个则根本不，它不会随每个setState() 更新。

总的来说，这个实现是否正确？

Answer 1

根据documentation...

setState() 将始终触发重新渲染，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果正在使用可变对象，并且在 shouldComponentUpdate() 中无法实现逻辑，则仅在新状态与先前状态不同时调用 setState() 将避免不必要的重新渲染。

tl;dr; React 不会分析您的视图以明确查看它所依赖的状态，这取决于您使用 shouldComponentUpdate() 进行优化。

shouldComponentUpdate(nextProps, nextState) {
  // check if your view's attributes changes
  let check1 = nextState.foo != this.state.foo
  let check2 = nextState.bar != this.state.bar

  // if return is true, the component will rerender
  return check1 || check2
}