React useError钩子

创建一个错误分发器。

• 使用useState()钩子创建一个保存错误的状态变量。
• 使用useEffect()钩子在错误为真时throw错误。
• 使用useCallback()钩子更新状态并返回缓存的函数。

const useError = err => {
  const [error, setError] = React.useState(err);

  React.useEffect(() => {
    if (error) throw error;
  }, [error]);

  const dispatchError = React.useCallback(err => {
    setError(err);
  }, []);

  return dispatchError;
};

const ErrorButton = () => {
  const dispatchError = useError();

  const clickHandler = () => {
    dispatchError(new Error('错误！'));
  };

  return <button onClick={clickHandler}>抛出错误</button>;
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <错误按钮 />
);