React中如何在useState内添加if条件判断初始化状态

useState 支持传入惰性初始化函数作为入参，这个函数仅会在组件首次渲染时执行一次，刚好可以把localStorage校验逻辑放进去做初始状态赋值，能避免首次加载时按钮文字先显示默认值再跳转的闪烁问题。

直接调整代码如下即可：

// 初始状态直接在useState的初始化函数里判断
const [buttonName, setButtonName] = useState(() => {
  return localStorage.getItem('address') ? 'Wallet Connected' : 'Connect Wallet';
});

const changeButtonName = () => {
  // 后续触发按钮状态更新时，复用相同判断逻辑即可
  setButtonName(localStorage.getItem('address') ? 'Wallet Connected' : 'Connect Wallet');
};

补充说明 #

• 如果你直接把判断逻辑写在useState()的参数位置（不包裹函数），逻辑虽然也能生效，但这段判断会在组件每一次重渲染时都执行，哪怕React只会取首次渲染的返回值作为初始状态，会产生无意义的性能开销，用惰性初始化函数的写法性能更优。
• 如果需要在页面打开状态下同步其他页面修改的localStorage值，可以额外加useEffect监听storage事件，触发状态更新即可。

内容的提问来源于stack exchange，提问作者breking bed