Question

我今天刚读了这篇极具启发性的文章：

https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f

本文使用以下示例来说明如何预绑定函数以防止组件不必要的重新呈现：

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.update = this.update.bind(this);
  }
  update(e) {
    this.props.update(e.target.value);
  }
  render() {
    return <MyInput onChange={this.update} />;
  }
}

这是有道理的，虽然我无法弄清楚如何在不使用bind或() => this.myFunc('some arg')的情况下将参数传递给函数。例如：

  <div>
    <TextField
      floatingLabelText="Email"
      required
      value={this.state.email}
      onChange={e => this.setState({email: e.target.value})}
    />
  </div>
  <div>
    <TextField
      type="password"
      floatingLabelText="Password"
      required
      value={this.state.password}
      onChange={e => this.setState({password: e.target.value})}
    />
  </div>

我不确定如何重构这个不使用绑定。我以这种方法为出发点：

_textChange(field, value) {
  this.setState({
    [field]: value,
  });
}

但我不确定如何从onChange道具传递参数并遵循上述文章中提出的建议。

此外，我还有我已经重构的代码：

export default OrgList = (props) => {
  const orgs = props.orgs.map((org) => {
    const addEditOrg = props.onAddEditOrg.bind(null, org, 'edit');
    const deleteOrg = props.onDeleteOrg.bind(null, org);

    return <TableRow key={org._id}>
      <TableRowColumn>{org.name}</TableRowColumn>
      <TableRowColumn>
        <IconButton onTouchTap={addEditOrg}>
          <ModeEdit />
        </IconButton>
        [...]

但我不确定这些预先绑定的功能是否在正确的位置。他们是否需要完全在组件之外？

Answer 1

我为此使用了name属性。例如：

isFunctionCalled

Answer 2

不幸的是，您必须创建设置电子邮件/密码的单独方法。

linkState在这里是noop，因为它总是返回不同的对象。同样适用于高阶函数（将匿名函数作为处理程序返回）。

我最终会得到这段代码。事件处理程序是相同的，没有以这种方式触发不必要的渲染。

setEmail(e) {
  this.setState({email: e.target.value})
}

setPassword(e) {
  this.setState({password: e.target.value})
}

<TextField
  onChange={this.setEmail}
/>

<TextField
  onChange={this.setPassword}
/>

性能的反应和预绑定函数

2 个答案: