Question

我想在动作中摆脱任何getState，因为它使得它们更难以测试，并且还将所有必需的项目作为参数传递，这是更安全和更干净的方法。问题来自传递一些，让环境变量变成行动。

我有一个需要显示单个项目的组件，它还会触发一个动作。动作不仅需要一个项目，还需要一个完整的项目列表。

我们不需要重新渲染无状态项目列表组件只是因为其他一些项目发生了变化，再次传递了我们必须的列表的最新版本......浪费并再次渲染。

废物处理方法：

const ListItem = ({name, list, onClickHandler}) => 
  <li onClick={() => onClickHandler(name, list)}>{{name}</li>

/////////////////////////////

class ListItemContainer extends React.Component {
  (...)

  shouldComponentUpdate(newProps) {
    //first red flag is the fact that I need to compare comples objects, in that 
    //case an array of objects, instead of simple values that should be rendered or not

    return !_.isEqual(newProps.list, this.props.list) //...and so on
  }

  render() {
     return <ListItem {...this.props} />
  }

  (...)
}

没有浪费的方法

//fist difference is that we do not pass list into item renderer

const ListItem = ({name, onClickHandler}) => 
  <li onClick={() => onClickHandler(name)}>{{name}</li>

/////////////////////////////

class ListItemContainer extends React.Component {
  (...)

  shouldComponentUpdate(newProps) {
    // comparing only the simple values that are about to be shown
    return newProps.name !== this.props.name
  }

  onClickHandler(name) {
    //I can make it much more flexible, with dynamic number of arguments but that's not the point here

    // the container does not need to rerender to pick the newest version of 'list' from the reducer, it just lies in props

    return this.props.onClickHandler(name, this.props.list)
  }

  render() {
     return <ListItem name={this.props.name} onClickHandler={onClickHandler.bind(this)} />
  }

  (...)
}

第二种解决方案不仅有效，而且在仅渲染已改变的内容和计算更改的复杂性方面也非常有效。

令我担心的是这种方法的干净代码问题，因为我觉得容器与那些方法，参数和无状态组件非常相关。

您如何看待这种方法，以及您避免“getState”和浪费的解决方案是什么？

减少Redux + React中的浪费

0 个答案: