Question

假设我有一个CookingClass组件，可以像这样初始化。

let teachers = makeTeachers(["Amber", "Jason", "Lily"])
let students = makeStudents(["Hopper"])

<CookingClass
  teachers={teachers}
  students={students}
/>

其中一位老师退学了：

let newTeachers = makeTeachers(["Amber", "Jason"])

<CookingClass
  teachers={newTeachers}
/>

它将使整个组件重新渲染。我不确定React是否只计算差异并有效地重新渲染它，或者我必须使用shouldComponentUpdate来自己处理它。

更真实的示例可能是实施Google地图，其中有一百万个标记，您想要替换其中一个标记。

Answer 1

您正在更改所谓的Virtual DOM节点。对于虚拟节点shouldComponentUpdate()中的每个更改都会被调用。如果您不自己实施，则始终return true;

因此，如果您只想在特定情况下重新加载CookingClass，则必须自行实施。

React的专家是，只有当它们在虚拟DOM中被更改时，它才会重新呈现Native DOM节点。这是＆＃34;渲染＆＃34;这使得React如此之快。

Answer 2

根据您的示例代码，组件将每次重新渲染。

您应该使用react-redux（documentation）绑定到＆＃34; connect＆＃34;商店的组件。

// ConnectedCookingClass.js
import { connect } from 'react-redux';
import CookingClass from './CookingClass';

const mapStateToProps = (state) => {
  return {
    teachers: state.teachers,
    students: state.students
  };
};

const ConnectedCookingClass = connect(mapStateToProps)(CookingClass);

export default ConnectedCookingClass;

然后在其他地方使用此组件：

// OtherComponent.js
import ConnectedCookingClass from './ConnectedCookingClass';

const OtherComponent = React.createElement({
  render() {
    return (
      <div>
        <ConnectedCookingClass />
      </div>
    );
  }
});

react-redux绑定会为你做一些聪明的事情，比如当mapStateToProps返回的道具实际上与之前的值（via a shallowEqual comparison）不同时只重新渲染组件，所以你应该尝试只在这里返回值，没有函数。函数应该在mapDispatchToProps中返回。

react-redux中shouldComponentUpdate的默认实现将在以下时间返回true：

总是如果组件是纯粹的＆＃34;组件（又名stateless-function）
手动更新道具时（在调用componentWillReceiveProps之后）
当商店发生变化且新道具与旧道具不同时。

以下是source code：

shouldComponentUpdate() {
  return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged
}

Answer 3

真实 DOM渲染完全由React处理，具有非常高效的innerHTML插入，并且仅适用于应用程序VirtualDomTree的新数据结构中的更改。

shouldComponentUpdate()控制组件是否应重新计算。例如，在渲染静态数据时，您应该使用它。组件的输出不会改变，因此您只需返回false，组件的第一个版本将永远使用;）

更新道具应该重新渲染整个组件吗？

3 个答案: