Question

我在想这是否可以：

@blueprint.route('/<user_role>/dashboard')
def dashboard(user_role):


    return render_template('dashboard.html')

然后添加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);。还是这是一种反模式？我听说PureComponents会降低性能...

Answer 1

使用connect和PureComponent没有问题。如果道具已更改并且using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using Microsoft.SqlServer.Server; using System.Data; using Microsoft.SqlServer.Management.Smo; namespace SQL_SMO_Server_Instances { public partial class Form1 : Form { Server SQLserver = new Server("(localDB)\\MSSQLlocalDB"); public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { DataTable Servers = new DataTable(); Servers = SmoApplication.EnumAvailableSqlServers(true); dgvServers.DataSource = Servers; lblInstanceName.Text = SQLserver.InstanceName; } } }将redux状态映射到道具，则PureComponent会呈现。请参见redux小组的this example。我已用Purecomponent替换了TodoList组件：

connect()

它的工作原理相同。

Answer 2

实际上，connect()函数默认使包装的组件纯净（请参阅docs）。也就是说，仅当属性更改（状态或自己的道具）时，才会重新包装对象。因此，从PureComponent继承是没有意义的，因为shouldComponentUpdate逻辑已经在connect()产生的HOC中实现。

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

PureComponent执行的浅道具比较是相对便宜的操作。我认为这不会成为问题。

Answer 3

我在连接组件的列表项上遇到了问题，并在对其进行了搜索之后最终在此处结束。

我将在此处添加问题的说明和解决方案：

mapStateToProps看起来像这样

import { defaultMemoize } from 'reselect';

const mapStateToProps = () => {
  const createMergedItem = defaultMemoize((item, edit) =>
    edit
      ? { ...item, edit: true }
      : { ...item, edit: false }
  );
  return (state, { item, edits }) => {
    //returning same ref when item and edits[item.id] didn't change
    return createMergedItem(item, Boolean(edits[item.id]));
  };
};

export default connect(
  mapStateToProps,
)(Item);

在“列表”组件中

items.map(item=>(<Item key={item.id} item={item} edit={edit} />)

代码稍微简化了一下，但是它的作用是List传递一个项目并以props的形式对每个Item组件进行编辑，edit是一个对象，其成员具有item.id作为键。如果我有一个ID为1的项目，且编辑为{1:anythingTruthy}，则该项目1处于编辑模式。

当我将列表中的项目从或更改为编辑模式时，即使mapStateToProps返回与上次相同的引用，列表中所有未更改的项目也会重新呈现。

我一直以为connect会返回一个纯组件，但我弄错了，解决方法是使Item成为纯组件，而使用React.memo则非常简单：

import { memo } from 'react';
//mapStateToProps is the same
export default connect(
  mapStateToProps,
)(memo(Item));//wrap Item in memo

项目是功能组件（props=>jsx）。

当您更改列表中一项的编辑模式时，edit道具将对所有项都更改，但要感谢defaultMemoize并从mapStateToProps返回一个创建已记忆的{{ 1}}函数，它将返回与上一个引用相同的props。这还不够，因为仍然调用了Item函数。我还必须使用createMergedItem使Item成为纯组件。

Answer 4

Pure组件仅对props进行更改，才对props进行浅层比较，然后重新渲染。

connect（HOC）还会进行浅表比较，并基于比较进行重新渲染。

两者都做相同的工作。因此，在同一个组件中使用这两个组件并没有什么害处，但是在使用两者的同时，post connect可以进行比较，纯组件也可以进行浅表比较。这是重复的，可能会花费时间。

在使用连接时避免使用纯组件。

React + Redux：可以将PureComponent连接到Redux吗？

4 个答案: