javascript - 在父组件上调用 setstate 会强制其子组件执行 componentDidUpdate 吗？

Question

我有两个组件，父组件 App 和子组件 SearchBar，我希望 SearchBar 保持自己的状态，并在更新其状态后调用其父组件提供的函数作为将更新其父状态的 prop。

所以在我的 SearchBar 组件上有

onSearchChange(event) {
        .
        .
        .
        this.setState({ searchTerm });

    }

然后

componentDidUpdate(){
    this.props.onSearchChange(this.state.searchTerm)
}

在父组件上

onSearchChange(searchTerm){
    this.setState({searchTerm});
}
render() {
    return (
        <div className="App">

            <div>
                <SearchBar onSearchChange={this.onSearchChange}/>
            </div>
            .
            .
            .
        </div>
    );
}

但这会导致无限循环，其中 SearchBar 的 componentDidUpdate 被调用，它调用其父级 onSearchChange 来更新父级状态，然后 SearchBar 的 componentDidUpdate 再次被调用等等。

如果我在 setState 中使用回调而不是 componentDidUpdate 来更新其父状态，它可以正常工作，但我只是不明白为什么 SearchBar 在它的 prop 是常量的情况下会更新。

Answer 1

componentDidUpdate 提供了两个参数 prevProps 和 prevState，通过它你可以检查实际的 props 或 state 是否发生了变化，然后对当前 state/props 进行更改。例如:

componentDidUpdate(prevProps, prevState){
if(prevState.searchTerm !== this.state.searchTerm) {
   this.props.onSearchChange(this.state.searchTerm)
  }
}