React + Redux:将PureComponent连接到Redux是否可以？

Question

我想知道这是否可以:

import React, { PureComponent } from "react";
import { Text, TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";

class ListItem extends PureComponent {
  render() {
    return (
      <TouchableOpacity>
        <Text style={{ color: "red" }}>Some Text</Text>
        <TouchableOpacity />
      </TouchableOpacity>
    );
  }
}

export default connect()(ListItem);

而且可能会添加mapStateToProps().或者这是反模式？我听说PureComponents会降低性能......

Answer 1

实际上connect()function 默认情况下使包装的组件成为纯的（请参阅docs）。也就是说，只有当属性发生变化（状态或自己的道具）时，包装的组件才会被重新渲染。所以从 PureComponent 继承是没有意义的，因为shouldComponentUpdate逻辑已经在由connect().

我听说 PureComponents 会降低性能...

PureComponent 执行的浅层 props 比较是相对廉价的操作。我不认为这会成为一个问题。

Answer 2

使用 connect 和 PureComponent 没有问题。如果 props 发生变化，PureComponent 会渲染connect()并将 redux 状态映射到 props。请参见redux 团队的这个示例。我已经用 Purecomponent 替换了 TodoList 组件：

class TodoList extends React.PureComponent {
  render() {
    const { todos, toggleTodo } = this.props;
    return (
      <ul>
        {todos.map(todo => (
          <Todo key={todo.id} {...todo} onClick={() => toggleTodo(todo.id)} />
        ))}
      </ul>
    );
  }
}

/*
const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)
*/

它的工作原理是一样的。