Question

请帮助我理解为什么我要传递给shouldComponentUpdate()的{{1}}有in Person.js的方法时，true返回props的原因完全没有改变。

这是我的App.js

中的代码

App.js

这是我Person.js中的代码

return <Person 
            name={cur.name} 
            age={cur.age} 
            job={cur.job} 
            key={cur.id} 
            change={(event) => this.changeName(event, cur.id)} 
            delete={(event) => this.deletePerson(cur.id)} 
        />;

shouldComponentUpdate(nextProps, nextState) {
        console.log(`[Person component] shouldComponentUpdate()`);
        console.log(this.props);
        console.log(nextProps);
        console.log(nextProps.name !== this.props.name || nextProps.age !== this.props.age || nextProps.job !== this.props.job);
        console.log(nextProps.delete !== this.props.delete);
        console.log(`------------------------`);
        console.log(this.props.delete);
        console.log(nextProps.delete);
        return nextProps !== this.props;
    }

按预期返回false，但是即使我删除了console.log(nextProps.name !== this.props.name || nextProps.age !== this.props.age || nextProps.job !== this.props.job); console.log(nextProps.delete !== this.props.delete); console.log(nextProps.delete !== this.props.delete);方法中的所有代码，App.js始终返回true。

那是为什么？

Answer 1

传递() => someFunc()这样的函数时，实际上是在每个渲染器上创建一个新函数。因此，尽管该功能仍在执行相同的操作，但实际上它是内存中的一个新功能。

我建议快速阅读this文章，以了解有关此问题和解决方案的更多详细信息。

传递新函数是一种常见的情况，当该函数需要某种形式的参数传递给它时，例如，一个ID来知道要删除哪个项目。常见的解决方案是将id作为道具与函数一起传递到组件。看起来像这样。

<Component 
  id={id}
  delete={deleteFunc}
/>

function Component(props) {

  const deleteItem() {
    props.delete(props.id);
  }

  return (
    <button onClick={deleteItem}>
      Delete
    </button>
  );
}

在这种情况下，函数将始终相同，并且我们仍然可以让函数接受其所需的参数。

当props具有函数或方法调用时，React shouldComponentUpdate返回true

1 个答案: