请参阅下面的片段,getInitialState
在每次渲染时执行。即使从它返回的值仅在第一次渲染期间使用。
我知道这是正常的 Javascript 行为。但是有没有办法使用 React 来避免它?
function App() {
function getInitialState() {
console.log('Executing getInitialState...');
return({
foo: 'bar'
});
}
const [myState,setMyState] = React.useState(getInitialState());
const [myBoolean,setMyBoolean] = React.useState(false);
return(
<React.Fragment>
<div>I am App</div>
<div>My state: {JSON.stringify(myState)}</div>
<div>My boolean: {JSON.stringify(myBoolean)}</div>
<button onClick={()=>setMyBoolean((prevState) => !prevState)}>Force Update</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"/>
最佳答案
不要直接在 useState
中调用函数,传递一个匿名函数来触发该函数。引用官方Doc .
function getInitialState() {
console.log('Executing getInitialState...');
return({
foo: 'bar'
});
}
function App() {
const [myState,setMyState] = React.useState(()=>getInitialState());
const [myBoolean,setMyBoolean] = React.useState(false);
return(
<React.Fragment>
<div>I am App</div>
<div>My state: {JSON.stringify(myState)}</div>
<div>My boolean: {JSON.stringify(myBoolean)}</div>
<button onClick={()=>setMyBoolean((prevState) => !prevState)}>Force Update</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"/>
关于javascript - 如何避免在每次渲染时执行 useState 函数参数(获取初始值)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58096155/