Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the benefits of using hook in react. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Advantages of using hook in react: 1, simplify logic reuse, make it easier to reuse code, Hook allows developers to reuse state logic without modifying the component structure; 2, Hook allows code for the same business logic to be aggregated together, so that business logic is clearly separated, making 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 practical work.

What is Hooks?

Hooks is translated into hooks, and Hooks is the function in the function component that is responsible for hooking into external functions.

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

When we need to introduce external functionality in the component, we can use the hooks provided by React, or custom hooks.

For example, if you introduce a manageable state function into a component, you can use the useState function, and the use of useState is described in more detail below.

Why use Hooks (benefits of using hook)

There are two main reasons for using Hooks:

Simplified logic reuse

Make complex components easier to understand.

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

Before the emergence of Hooks, React had to borrow high-level components, render props and other complex design patterns to achieve logic reuse, but high-level components will produce redundant component nodes, making debugging more complex.

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

For example, antd-table, which is often used, often needs to maintain some states and change them when appropriate:

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}

Every table has to write some of this logic, so there is no time to fish. These highly similar logic can be abstracted by encapsulating a high-level component. This high-level component comes with these states and can automatically call server to get the remote data.

If implemented with high-level components, it would 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;};}; @ useTable (server) class App extends Component {render () {const {tableProps} = this.props Return ()}}

If you use hooks to implement it, 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 ()} / *

Compared with the layers of nesting of high-level components "grandfather = > father = > son"

The hooks goes like this:

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

As you can see, the logic of hooks is clearer and more readable.

two。 Make complex components easier to understand

In the class component, the code of the same business logic is scattered in different life cycle functions of the component, while Hooks can aggregate the code for the same business logic together, so that the business logic is clearly separated and the code is easier to understand and maintain.

These are all the contents of this article entitled "what are the benefits of using hook in react?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.