This is the 16th day of my participation in the August More Text Challenge.

component

Whether or not a controlled

  • Uncontrolled component

    The form data is managed by DOM node, which is characterized by the fact that form data should be obtained when needed, rather than in real time, and the code implementation is relatively simple

  • The controlled components

    The form data is managed by the State object, which is characterized by the fact that the form-time data can be obtained in real time and the code is relatively complex

React Hook

Function components are enhanced to store state and have the ability to handle side effects

Routing Hooks react – the router – the dom

  • useHistory

  • useLocation

  • useRouteMatch

  • useParams

Hook function

useState

  • Save data through closures (variables are usually released after the function is finished executing)

  • The DOM is re-rendered each time the state is updated

useEffect

  • Replace componentDidmount, componentDidUpdate, componentWillUnmount Life cycle

  • UseEffect (()=>{}) = componentDidmount, componentDidUpdate Is executed after the component is mounted and is executed after the component is updated

  • UseEffect (() = > {}, []) is equal to the componentDidmount

  • UseEffect (()=>()=>{}) equals componentWillUnmount. Is executed before the component is uninstalled

  • UseEffect (()=>{console.log(count)},[count])

  • The argument function in useEffect cannot be an asynchronous function because useEffect returns a function that cleans up the resource. If it is an asynchronous function, it returns a Promise, and you can use a self-executing function internally

Tag: useEffect (() = > {(async () = > {await axios. The get ()}) ()})

useMemo

Similar to computed properties in Vue, you can detect a change in a value and calculate a new value based on that change

The calculation results are cached, and if the detection value does not change, it will not be recalculated even if the component is re-rendered. The calculation behavior can help avoid costly calculations on each render

It is used for performance optimization to prevent component updates if the data in this component has not changed, similar to PureComponent and shouldComponentUpdate in class components

useCallback

Mainly used for performance optimization, caching functions so that components get the same function instance when re-rendering

useRef

  • To get the DOM element object

  • Used to store data that is not lost when the component is re-rendered

Customize the Hook

  • Logical sharing between components can be achieved

  • Is a function that starts with use

  • It’s a combination of logic and built-in hooks

The life cycle

Mount the stage

  • The constructor ()

  • The static getDerivedStateFromProps ()

  • Render ()

  • ComponentDidMount ()

Update the stage

  • The static getDerivedStateFromProps ()

  • ShouldComponentUpdate ()

  • Render ()

  • GetSnapshotBeforeUpdate () : called before the last render output to enable the component to capture some information from the DOM before changes are made, such as: scrolled position, any return value of this sound life cycle will be passed as arguments to componentDidUpdate ()

  • ComponentDidUpdate ()

Unloading phase
  • ComponentWillUnmount ()