Javascript 如何避免useReducer（reducer，getInitialState（））中使用的getInitialState（）函数在每个渲染上运行？

请参阅下面的代码片段

通过这样做：

React.useState(()=>getInitialState2());

避免在每次渲染时运行useState中使用的getInitialState2

但这在useReducer钩子上似乎不起作用

问题:

有没有办法避免在每次渲染时运行useReducer钩子上initialState参数中使用的函数

功能应用程序{ const[state，dispatch]=React.usereducer，getInitialState； const[state2，setState2]=React.useState=>getInitialState2； 回来 状态：{State} State2:{State2} 分派{type:INCREMENT}}>+ 分派{type:DECREMENT}}>- ; } 函数getInitialState{ console.logFrom getInitialState。。。； 返回0； } 函数getInitialState2{ console.logFrom getInitialState2。。。； 返回0； } 函数还原状态、动作{ 开关动作类型{ 案例增量：{ 返回状态+1； } 案件减量：{ 返回状态-1； } 默认值：{ 返回状态； } } } ReactDOM.render、document.getElementByIdroot；

---

通过调用它，可以在每个渲染上运行它。要生成，请传递一个函数。此外，lazy init是useReducer的第三个参数。作为useReducer的第二个参数提供的任何内容都将传递给lazy init函数，但您可以忽略它

const [state,dispatch] = React.useReducer(reducer, null, getInitialState);

或者，如果需要使用props中的值对其进行初始化，请使用箭头函数对其进行包装：

const [state,dispatch] = React.useReducer(reducer, null, () => getInitialState(props.something));

演示：

功能应用程序{ const[state，dispatch]=React.useReducerreducer，null，getInitialState； const[state2，setState2]=React.useState=>getInitialState2； 回来 状态：{State} State2:{State2} 分派{type:INCREMENT}}>+ 分派{type:DECREMENT}}>- ; } 函数getInitialState{ console.logFrom getInitialState。。。； 返回0； } 函数getInitialState2{ console.logFrom getInitialState2。。。； 返回0； } 函数还原状态、动作{ 开关动作类型{ 案例增量：{ 返回状态+1； } 案件减量：{ 返回状态-1； } 默认值：{ 返回状态； } } } ReactDOM.render、document.getElementByIdroot；

---

通过调用它，可以在每个渲染上运行它。要生成，请传递一个函数。此外，lazy init是useReducer的第三个参数。作为useReducer的第二个参数提供的任何内容都将传递给lazy init函数，但您可以忽略它

const [state,dispatch] = React.useReducer(reducer, null, getInitialState);

或者，如果需要使用props中的值对其进行初始化，请使用箭头函数对其进行包装：

const [state,dispatch] = React.useReducer(reducer, null, () => getInitialState(props.something));

演示：

功能应用程序{ const[state，dispatch]=React.useReducerreducer，null，getInitialState； const[state2，setState2]=React.useState=>getInitialState2； 回来 状态：{State} State2:{State2} 分派{type:INCREMENT}}>+ 分派{type:DECREMENT}}>- ; } 函数getInitialState{ console.logFrom getInitialState。。。； 返回0； } 函数getInitialState2{ console.logFrom getInitialState2。。。； 返回0； } 函数还原状态、动作{ 开关动作类型{ 案例增量：{ 返回状态+1； } 案件减量：{ 返回状态-1； } 默认值：{ 返回状态； } } } ReactDOM.render、document.getElementByIdroot；

---

由于每次渲染时都会重新运行组件，因此一个选项是仅在组件外部检索一次初始状态：

const initialState1=getInitialState； 功能应用程序{ const[state，dispatch]=React.usereducer，initialState1； const[state2，setState2]=React.useState=>getInitialState2； 回来 状态：{State} State2:{State2} 分派{type:INCREMENT}}>+ 分派{type:DECREMENT}}>- ; } 函数getInitialState{ console.logFrom getInitialState。。。； 返回0； } 函数getInitialState2{ console.logFrom getInitialState2。。。； 返回0； } 函数还原状态、动作{ 开关动作类型{ 案例增量：{ 返回状态+1； } 案件减量：{ 返回状态-1； } 默认值：{ 返回状态； } } } ReactDOM.render、document.getElementByIdroot；

---

由于每次渲染时都会重新运行组件，因此一个选项是仅在组件外部检索一次初始状态：

const initialState1=getInitialState； 功能应用程序{ const[state，dispatch]=React.usereducer，initialState1； const[state2，setState2]=React.useState=>getInitialState2； 回来 状态：{State} State2:{State2} 分派{type:INCREMENT}}>+ 分派{type:DECREMENT}}>- ; } 函数getInitialState{ console.logg 初始状态。。。； 返回0； } 函数getInitialState2{ console.logFrom getInitialState2。。。； 返回0； } 函数还原状态、动作{ 开关动作类型{ 案例增量：{ 返回状态+1； } 案件减量：{ 返回状态-1； } 默认值：{ 返回状态； } } } ReactDOM.render、document.getElementByIdroot；