What are the benefits of using hooks in react

The benefits of using hooks in react: 1. Simplify logic reuse and make it easier to reuse code. Hooks allow developers to reuse state logic without modifying the component structure; 2. Hooks allow Codes for the same business logic are aggregated together to clearly separate the business logic and make the code easier to understand and maintain.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

Hook is a new feature of React 16.8. It is specially used in functional components. It can replace other features of react in class components and is commonly used in actual work.

What are Hooks

Hooks is translated as hooks. Hooks are functions within function components that are responsible for hooking into external functions.

React provides some common hooks, and React also supports custom hooks. These hooks are used to introduce external functions to functions.

When we need to introduce external functions into a component, we can use the hooks provided by React or customize hooks.

For example, if you introduce the function of managing state in a component, you can use the useState function. The usage of useState will be introduced in detail below.

Why use Hooks (benefits of using hooks)

There are 2 major reasons for using Hooks:

• Simplify logic reuse;

• Make complex components easier to understand.

1. Simplify logic reuse and make it easier to reuse code

Before Hooks appeared, React had to borrow high-order components and render Complex design patterns such as props can achieve logic reuse, but high-order components will generate redundant component nodes, making debugging more complicated.

Hooks allow us to reuse state logic without modifying the component structure.

For example, the frequently used antd-table often needs to maintain some states and change them at the right time:

componentDidMount(){
 this.loadData();
}
loadData = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
     dataSource: xxx[]
   })
}
onTableChange = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
   })
}
render(){
 const {total,pageSize,current,dataSource} = this.state;
 return <Table
  dataSource={dataSource}
  pagination={{total,pageSize,current}
  onChange={this.onTableChange}
 />
}

Each table must write some of these According to logic, there is no time left to catch fish. These highly similar logics can be abstracted by encapsulating a higher-order component. This high-order component comes with these states and can automatically call the server to obtain remote data.

If it is implemented with high-order components, it will be like this:

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {
        tableProps: xxx, 
      };
      render() {
        const { tableProps } = this.state;
        return <WrappedComponent tableProps={tableProps} />;
      }
    };
  };
}
@useTable(server)
class App extends Component{
  render(){
    const { tableProps } = this.props;
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性。
        {...tableProps}
      />
    )
  }
}

If it is implemented with hooks, it will be:

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  const [tableProps, setTableProps] = useState(xxx);
  return tableProps;
}
function App {
    const { tableProps } = useTable();
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性
        {...tableProps}
      />
    )
}
/*

Compared with high-order components "grandfather=> ;Parent=>Child” is nested layer by layer,

hooks are like this:

const { brother1 } = usehook1; 
const { brother2} = usehook2;
*/

You can see that the logic of hooks is clearer and the readability is better.

2. Make complex components easier to understand

In class components, the code of the same business logic is scattered in different life cycle functions of the component, and Hooks can make Codes for the same business logic are aggregated together to clearly separate the business logic and make the code easier to understand and maintain.

[Related recommendations: Redis video tutorial]

The above is the detailed content of What are the benefits of using hooks in react. For more information, please follow other related articles on the PHP Chinese website!