useEffect监听多个变量

useEffect监听了多个变量怎么办？

前言

如何监听多个变量？在React开发中经常会遇到的问题。随着应用复杂性的增加，组件中可能涉及多个状态的变化，根据这种变化可以做相应的业务，这时候监听就变得很有必要了。

常见的错误方式

常见的错误方式是为每个变量创建独立的useEffect，如下所示：


function userComponent() {const [keyword, setKeyword] = useState('');const [userName, setUserName] = useState('');useEffect(() => {// 处理关键字变化// ...}, [keyword]);useEffect(() => {// 处理筛选选项变化// ...}, [userName]);// ...
}

这种方式会导致多个useEffect之间逻辑分散，使得代码难以维护。此外，每个useEffect都会引入一些开销，可能会影响性能。

在单个useEffect中监听所有变量

另一种常见的错误方式是将所有变量都放在单个useEffect中监听，如下所示：

function userComponent() {const [keyword, setKeyword] = useState('');const [userName, setUserName] = useState('');useEffect(() => {// 处理所有变量的变化// ...}, [userName，keyword]);// ...
}

这样做虽然可以减少useEffect的数量，但可能会导致过于复杂的逻辑，使得代码难以阅读和维护。

最佳实践：整合和优化

为了更好地处理useEffect监听多个变量的情况，我们可以采取一些最佳实践，从而提高代码的可维护性和性能。

1. 整合变量并抽象副作用逻辑

将需要监听的变量整合到一个状态对象中，同时抽象副作用逻辑为独立的函数，如下所示：


function userComponent() {const [data, setData] = useState({keyword: '',userName: '',});const handleSearchChange = useCallback(() => {// 处理变量的变化// ...}, [data.keyword, data.userName]);useEffect(() => {handleSearchChange();}, [handleSearchChange]);// ...
}

通过将副作用逻辑抽象出来，我们可以更好地组织代码，并减少重复的逻辑。