我应该在哪里声明在使用fepteffect()挂钩中调用的函数

Question

所以我在使用调用依赖状态的函数的useEffect时会有以下情况。

示例：

// INSIDE APP COMPONENT
const [someState, setSomeState] = React.useState(0);
const [someTrigger, setSomeTrigger] = React.useState(false);
function someFunction() {
  return someState + 1;  
}
React.useEffect(() => {
  const newState = someFunction();  // 'someFunction' IS BEING CALLED HERE
  setSomeState(newState);
},[someTrigger])

问题：

在这种情况下，我应该在useEffect()内声明someFunction还是安全地将其保存在外部(但内部组件的身体(？

我可以将其添加到dependency数组中，但是它会损害我的代码的可重新性，因为我想专注于trigger。

由于useEffect()将在新鲜渲染后运行，因此可以安全地假设它将在其内部调用的功能上有新的副本？

是否有何时应该在useEffect挂钩内声明功能的基本规则，或者何时必须将其添加到依赖项数组中？

编辑：请注意，useEffect有必要具有这些功能的新副本，因为这些功能需要访问一些新的最新state变量。

注意：

此代码触发以下 eslint警告在codesandbox上。虽然效果很好。

React Hook React.useeffect缺少依赖性："一些功能"。包括它或删除依赖关系数组。(反应钩/详尽的deps(eslint

真实情况：

这是一个简化的示例。在我的真实情况下，这是一个带有过滤器组件的产品搜索页面。因此，当我单击过滤器激活它(例如price <= 50(时，我正在触发一个"侦听" activePriceFilters状态变量的useEffect()。然后，该效果调用一个函数(示例中的someFunction(，该函数将计算filteredList，并将使用新的filteredList设置新的productList状态。

代码

function App() {
  
  const [someState, setSomeState] = React.useState(0);
  const [someTrigger, setSomeTrigger] = React.useState(false);
  
  function someFunction() {
    return someState + 1;  
  }
  
  React.useEffect(() => {
  
    const newState = someFunction();
    setSomeState(newState);
  
  },[someTrigger])
  
  return(
    <React.Fragment>
      <div>I am App</div>
      <div>My state: {someState}</div>
      <button onClick={()=>setSomeTrigger((prevState) => !prevState)}>Click</button>
    </React.Fragment>
  );
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 1

使用使用效率内或外部定义功能的决定取决于所有函数的调用。

如果您的函数仅在使用效率内调用，则在使用效率中定义它是有意义的。

但是，从使用效率以及其他事件处理程序或其他效果中调用相同的功能，您需要在使用效率之外定义它

ps。在您的情况下，您只是在更新您不需要定义单独函数的状态

function App() {
  
  const [someState, setSomeState] = React.useState(0);
  const [someTrigger, setSomeTrigger] = React.useState(false);
  
  React.useEffect(() => {
    setSomeState(oldState => oldState + 1);
  
  },[someTrigger])
  
  return(
    <React.Fragment>
      <div>I am App</div>
      <div>My state: {someState}</div>
      <button onClick={()=>setSomeTrigger((prevState) => !prevState)}>Click</button>
    </React.Fragment>
  );
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

就您的情况而言，您会像

一样写它

useEffect(() => {
    const calcVal = (oldState) => {
         // calculate previous state based on oldState
    }
    setSomeState(calcVal);
}, [activePriceFilters])

Answer 2

设置另一个状态根本不应该是效果。

 const [someState, setSomeState] = React.useState(0);
 function incrementState() {
    setSomeState(someState => someState + 1);
 }