从下面的代码片段可以看出,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
的初始化来说,异步调用永远不会起作用。因此,“避免在每次渲染时计算初始值”的唯一原因就是“太重了”。 - skyboyer