[email protected]

1. React lifecycle

Mounting:

  • constructor
  • componentWillMount
  • componentDidMount
  • render

Updating

  • componentWillReceivedProps
  • SCU
    • shadow state and props comparision
  • componentWillUpdate
  • render
  • componentDidUpdate

Unmounting

  • componnentWillUnmount

2. Error handling

React does not provide a way to recover the scene.

/ / [email protected]
class App extends React.Component {
  componentWillMount() {
     throw new Error('something Wrong')}render() {
    return <div>
      App render
    </div>
  }
}
ReactDom.render(<App />.document.querySelector('#root')) // Blank screen
Copy the code

[email protected]

  • Components can now return arrays and strings from render
  • ErrorBoundary
    • componengDidCatch
    • getDerivedStateFromError
  • ReactDOM.createPortal()

ErrorBoundary

  • Can capture

    • constructorWithin the error
    • Errors during the life cycle
    • renderError of process

  • Can’t capture

    • Event Handler, you can use it in your codetry{}catch(e){}
    • Asynchronous code
    • Server side rendering
    • ErrorBoudaryInternal code
// Add the ErrorBoundary component
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
  render() {
    if (this.state.hasError) {      
      return <h1>Something went wrong.</h1>; // falllback ui
    }
    return this.props.children; }}const el = <ErrorBoundary>
  <App />
</ErrorBoundary>
// The page will display the text of Something went wrong
ReactDom.render(el, document.querySelector('#root')) 
Copy the code

[email protected]

1. Life cycle

  • Mounting
    • incomponentWillMountBefore the increasestatic getDerivedStateFromProps
    • componentWillMount/UNSAFE_ComponentWillMount
  • Updating
    • inSCUIncrease beforestatic getDerivedStateFromProps
    • componentWillReceiveProps/UNSAFE_componentWillReceiveProps
    • componentWillUpdate/UNSAFE_componentWillUpdate
    • renderafterComponentDidUpdateBefore, it increasedgetSnapshotBeforeUpdatehook

2. <React.StrictMode>

This higher-level component is used to detect old apis or unsafe lifecycle usage and give warnings accordingly. Document portal

3.ref

  • createRef
  • forwardRef

[email protected]

  • React.memo
  • React.lazy
  • Suspense(withReact. lazy implements code-spliting)

[email protected]

  • hooks

[email protected]

  • Concurrent Mode

Cheat sheet:

Data change without mutation

  • Easier Undo/Redo and Time Travel. Just save the reference.
  • tracking change… If the change is based on the previous object, the comparison may require traversing all properties; But if you pass in a new object, all you need to do is compare references
  • With PureComponent, it’s easier to compare and figure out when to render. ShouldComponentUpdate.