React useState存储函数

React useState存储函数

错误写法

使用useState存储一个函数

const [callback,setCallback] = useState(
	() => { alert('init') }
)

点击按钮，修改函数

<button onClick={() => setCallback( () =>alert('set') )}></button>

以上代码出现会出现的问题：

• 组件渲染的时候会出现弹窗（‘init’）
• 点击按钮的时候会出现弹窗（‘set’）

解析：

这其实是useState的另一种写法，如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

正确写法

const [callback,setCallback] = useState(() => () => {
    alert('init') 
})

<button onClick={() => setCallback( () => () =>alert('set') )}></button>