React In Depth All In One

React In Depth

React Component Lifecycle

https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/state-and-lifecycle.html

Interactive React Lifecycle Methods diagram

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

https://github.com/wojtekmaj/react-lifecycle-methods-diagram

React Hooks

https://reactjs.org/docs/hooks-intro.html

https://reactjs.org/docs/hooks-custom.html

https://reactjs.org/docs/hooks-rules.html

useState

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React Error Handling

Error Boundary

// Error Boundary

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

https://reactjs.org/docs/error-boundaries.html

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

refs

https://stackoverflow.com/questions/49707828/how-to-write-test-case-for-errorboundary-in-react-using-jest-enzyme

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---