Question

我目前正从州获取道具并在事件监听器上使用它。即，

import * as React from 'react';
import { getDetails } from './actions';

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

@connect((state) => ({
  selecting: state.items.selecting,
}), {
  getDetails,
})
export default class Grid extends React.PureComponent<Props> {
  onMouseEnter = () => {
    if (!this.props.selecting) {
      this.props.getDetails();
    }
  }

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

但是，只要selecting属性发生更改，就会重新呈现给我的组件。

有没有办法将状态从状态传递到connect并且没有触发此更新到我的组件？我希望它几乎就像是一个实例绑定变量而不是状态变量。

Answer 1

尝试覆盖shouldComponentUpdate（）生命周期函数。这使您可以更精细地控制组件应该或不应该重新呈现的时间（以增加代码复杂性为代价）。

shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.someLogic !== this.props.someLogic)
        return false; // Don't re-render
    return true;
}

文档：Here

使用shouldComponentUpdate（）让React知道组件的输出是否不受当前状态或道具更改的影响。默认行为是在每次状态更改时重新呈现，在绝大多数情况下，您应该依赖于默认行为。

从状态传递道具，不要在连接中触发更新

1 个答案: