preface

Prior to React 16.8, function components could only be stateless and had no access to the React lifecycle. New to React, hook allows you to use state and other React features, such as life cycles, without writing a class. Let’s follow with an example of how to use hooks to emulate the more common class component life cycle.

constructor

The class components

class Example extends Component {
    constructor() {
        super(a);this.state = {
            count: 0
        }
    }
    render() {
      return null; }}Copy the code

Function components do not need constructors and can initialize state by calling useState

function Example() {
  const [count, setCount] = useState(0);
  return null;
}
Copy the code

componentDidMount

Class component access componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted! ');
  }
  render() {
    return null; }}Copy the code

Model componentDidMount using hooks

function Example() {
  useEffect((a)= > console.log('mounted'), []);
  return null;
}
Copy the code

UseEffect has two arguments. The first argument is called as a callback function after the browser layout and drawing is complete, so it does not block the browser’s rendering process. The second argument is an array

  • While the array is present and has values, if any value in the array changes, the callback will be triggered after each render.
  • When it does not exist, a callback is triggered after each render.
  • When it’s an empty list, the callback is only fired once, similar to componentDidMount.

shouldComponentUpdate

The class component calls shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
  console.log('shouldComponentUpdate')
  // return true Updates the component
  // return false does not update the component
}
Copy the code

Hooks to simulate shouldComponentUpdate

constMyComponent = React.memo( _MyComponent, (prevProps, nextProps) => nextProps.count ! == prevProps.count )Copy the code

Memo wraps a component to shallow compare its props, but this is not an hooks because it is written differently from hooks. The memo is equivalent to PureComponent, but it only compares props.

componentDidUpdate

The class component accesses componentDidUpdate

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}
Copy the code

Model componentDidUpdate using hooks

useEffect((a)= > console.log('mounted or updated'));
Copy the code

It’s worth noting that the callback here is called after every render, so you can access not only componentDidUpdate, but also componentDidMount, which we can do if we just want to emulate componentDidUpdate.

const mounted = useRef();
useEffect((a)= > {
  if(! mounted.current) { mounted.current =true;
  } else {
   console.log('I am didUpdate')}});Copy the code

UseRef creates “instance variables” in the component. It acts as a flag to indicate whether the component is in the mount or update phase. Else is executed when the component is updated to simulate componentDidUpdate separately.

componentWillUnmount

The class component accesses componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}
Copy the code

Hooks to simulate componentWillUnmount

useEffect((a)= > {
  return (a)= > {
    console.log('will unmount'); }} []);Copy the code

When a function is returned in the useEffect callback, it is called before the component is unloaded. This is where we can clear timers or event listeners.

conclusion

Function components that introduce hooks are becoming more sophisticated, and in most cases it is perfectly possible to use hooks instead of class components. And using functional components also has the following benefits.

  • Purely functional concepts, the same props get the same render.
  • You can use function composition, nesting, to achieve more powerful components.
  • Components are not instantiated and overall rendering performance is improved.

However, the hooks simulation life cycle is not the same as the life cycle in class, and we still need to think about what works best in a business scenario when we use it.

Refer to the link

The last

GitHub if there are omissions, please correct!! If feel helpful to you! Please don’t forget to like or follow! Your attention will be my motivation to move forward! Rush duck!!