如何从state传递Prop且不触发connect更新？附当前实现代码

我明白你的需求啦——你想拿到state里的selecting值来控制鼠标进入事件的逻辑，但又不想因为这个值的变化导致Grid组件重新渲染，对吧？

问题根源 #

你现在通过connect的mapStateToProps把state.items.selecting映射成了组件props，只要这个state值发生变化，connect就会判定组件props更新，进而触发组件重渲染。要解决这个问题，核心就是绕过connect的props映射，直接在事件处理逻辑里获取最新的state值。

具体实现方案 #

方案1：直接访问store实例（推荐）

如果你的项目里store是单例导出的（通常都是这么做的），可以直接在事件处理函数里调用store.getState()获取最新的state，不需要把selecting放进mapStateToProps：

import * as React from 'react';
import { getDetails } from './actions';
import store from './store'; // 导入你的store实例

interface Props {
  getDetails(): Action<void>;
}

@connect(
  () => ({}), // 这里不再映射selecting
  { getDetails }
)
export default class Grid extends React.PureComponent<Props> {
  onMouseEnter = () => {
    // 直接从store获取最新的selecting值
    const selecting = store.getState().items.selecting;
    if (!selecting) {
      this.props.getDetails();
    }
  }

  render() {
    return <div onMouseEnter={this.onMouseEnter}>...</div>;
  }
}

这样一来，selecting的变化不会触发组件props更新，自然也就不会导致组件重渲染，但你依然能在事件触发时拿到最新的state值。

方案2：自定义connect的状态比较逻辑（不推荐）

如果你必须通过mapStateToProps映射selecting，可以通过connect的第四个参数自定义状态比较规则，忽略selecting的变化：

@connect(
  (state) => ({
    selecting: state.items.selecting,
    // 其他需要映射的props
  }),
  { getDetails },
  null,
  {
    areStatesEqual: (nextState, prevState) => {
      // 只比较除了items.selecting之外的状态部分
      return (
        // 这里替换成你实际需要关注的state字段比较
        prevState.otherRelevantPart === nextState.otherRelevantPart
        // 忽略selecting的变化
      );
    }
  }
)

⚠️ 注意：这个方法风险较高，因为如果后续新增了需要触发重渲染的state字段，很容易遗漏比较逻辑，导致组件不更新的bug，所以更推荐方案1。

内容的提问来源于stack exchange，提问作者corvid