反应钩中的预防状态

Question

如何在功能组件中使用preState和use效果？我被告知要更新类组件到功能组件，我被困在了组件的didUpdate部分

 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

你没有像prevState一样的类内生命周期组件，但我认为这里的答案可能会对你有所帮助，只是为了道具，让它成为状态

如何在效果上比较旧值和新值？

Answer 2

您必须创建您的自定义钩子usePre上一个，请参考这里。

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
     ref.current = value;
  });
  return ref.current;
}

那么你必须这样做：

const Component = (props) => {
   const {search, setSearch} = useState('');
   const prevSearch = usePrevious({search, setSearch});
   useEffect(() => {
      if(prevSearch.search !== search) {
          //Your code goes here
      }
   }, [search])
}

Answer 3

所以看起来你只是使用以前的状态来避免不必要的渲染。这实际上是一个足够常见的问题，它被内置到use效应中：

js prettyprint-override">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-通过跳过效果优化性能

您的组件可能看起来像：

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