reactjs - react 钩子(Hook)中的prevstate

Question

如何在功能组件中使用 prevState 和 useEffect？我被告知将类组件更新为功能组件，我被困在使用 prevState 的 componentDidUpdate 部分

 componentDidUpdate(prevProps, prevState) {
    if (prevState.search !== this.state.search) {
      this.getData()
    }
    if (prevState.finalSearch !== this.state.finalSearch) {
      if (this.state.finalSearch) {
        this.newData()
      } else {
        this.getRawData()
      }
    }
  }
 

<Search
          search={search}
          finalSearch={finalSearch}
        />

Answer 1

所以看起来你只是在使用以前的状态来避免不必要的渲染。这实际上很常见，它被内置到 useEffect 中:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

变成:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

来源:https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

您的组件可能看起来像:

useEffect(() => {
  getData()
  
  if (finalSearch) {
    newData()
  } else {
    getRawData()
  }
}, [search, finalSearch]);