Use React Hooks to save 90% of code

Hook is a new feature proposal that lets you use state and other React functionality without writing classes. It currently exists in React V16.7.0-Alpha. It is said that 90% of the code can be optimized using hook refactoring.

React 3 ways to write components

1, the React. CreateClass ()

Using the ES5 method to create components is not recommended.

2, extends ponent at React.Com

The class-defined component can use all of the life cycles provided by React, and also provides PureComponent optimization for rendering performance, which is currently recommended.

3. Function components defined functionally (before 16.7)

• There is no concept of State
• Cannot access this object
• Cannot access the React lifecycle

After React16.7, React added a number of features to the function component:

• Introduce the concept of state
• Introduce the React lifecycle concept
• Introduce shouldComponentUpdate

Using the Function component takes full advantage of the benefits of functional programming:

• 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

The use of State

Use State in the function component.

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()= > setCount(count + 1)}>Click me</button>
    </div>
  );
}
Copy the code

Use Effect

Bind the life cycle to the Function component: componentDidMount, componentDidUpdate, and componentWillUnmount.

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount and componentDidUpdate Life cycle
  useEffect(
    (a)= > {
      document.title = `You clicked ${count} times`;
      // componentWillUnmount Life cycle
      return (a)= > {
        console.log('componentWillUnmount');
      };
      // The second argument, which is equivalent to shouldComponentUpdate, should only trigger Effect if count changes
    },
    [count]
  );

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

Use the Context

Using a component defined by class, when using context, the code looks like this:

• Wrap it with Provider first
• Then use Consumer to unbind the data

import React from 'react';
const ThemeContext = React.createContext('light');

/ / child component
class Child extends React.Component {
  render() {
    returnProvider value="light"> < themecontext. Consumer> {theme => <div> Current theme: {theme}</div>} </ThemeContext.Consumer> </ThemeContext.Provider> </div> ); }}Copy the code

If you switch to the useContext syntax, it is very simple:

import { useContext } from 'react';
function Example() {
  const theme = useContext(ThemeContext);
  return <div>Current theme :{theme}</div>;
}
Copy the code

Customize the Hook

A custom Hook is a JavaScript function whose name starts with use that can call other hooks.

// After loading is simulated for 3 seconds, the Online effect is displayed
import { useState, useEffect } from 'react';

function useFriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status);
  }

  setTimeout((a)= > {
    setIsOnline(true);
  }, 3000);

  if (isOnline === null) {
    return 'Loading... ';
  }
  return isOnline ? 'Online' : 'Offline';
}

// Used in another component
function Example() {
  // A custom hook is a function that is nested directly.
  const isOnline = useFriendStatus();
  return <p>{isOnline}</p>;
}
Copy the code

conclusion

With the release of version 16.7, the React Function component has received a lot of development, which not only saves code but also improves rendering efficiency, and will definitely become the defining method of the React component in the future.

The resources

Introducing Hooks

React Today and Tomorrow and 90% Cleaner React