What is a hook

React 16.8 Hook is a new feature for functional components. It can replace other features of React class components and is used in practical applications.

Why is hook development recommended

Hooks are specifically designed to work with functional component development. They can be used to replace some of the life cycles of class components and avoid a lot of this confusion, so hooks are easy to develop and easier for developers to understand code

Above is a simple summary, more reason can refer to the react website: react.docschina.org/docs/hooks-…

useState

In the code:

React.usestate (0) is equivalent to adding an attribute value to this.state in the class component

Variable corresponds to the value of this.state. variable in the class component

SetVariable can be used to change the value of variable, which can be equivalent to this.setState in the class component

import React,(useState) from 'react' export default function useState_Demo() { const [variable, setVariable] = useState(0); // By deconstructing the assignment, SetVariable function changeVariable(){setVariable((variable) => variable +1) <div> <button onclick = {change}> <div> <div>Copy the code

useEffect

In the code:

UseEffect is used instead of componentDidMoun, componentDidUpdate, and componentWillUnmount

import React,(useState, useEffect) from 'react' export default function useState_Demo() { const [variable, setVariable] = useState(0); SetVariable useEffect(() => {// This return is called when the component is monitoring data changes or is uninstalled. Return () => {console.log(' this component is unmounted ')}}, [variable]) [] useEffect () {// componentDidMount () {// useEffect () {// componentDidMount () {// componentDidMount () {// useEffect () {// componentDidMount () {// The useEffect callback is executed whenever the component has a state change, ComponentDidUpdate hook function changeVariable(){setVariable((variable) => variable +1) <div> <button onclick = {change}> <div> <div>Copy the code

Hooks need to be noticed

Use hooks only in the outermost layer of component functions. Do not call hooks in loops, conditions, or nested functions

Import React,(useEffect) from 'React' export default function useState_Demo() {useEffect(() => {}) If (true) {useEffect(() => {})} Using the circular while (true) {useEffect (() = > {})} / / error 3, using the nested useEffect (() = > {useEffect (() = > {})})}Copy the code

You cannot use a Hook outside a function of a component

Import React,(useState, useEffect) from 'React' // error 1 useState const [variable, setVariable] = useState(0); // Error 2, UseEffect useEffect(() => {}) export default function useState_Demo() {// useState_Demo() const [variable, setVariable] = useState(0); }Copy the code

To avoid these errors, install the eslint-plugin-react-hooks eslint plugin to check for errors in your code

Customize the hook

The custom hook is to facilitate the sharing of logic between components. In fact, it encapsulates the reuse function. The built-in hook of React is also called inside the custom hook, and the name should start with use

UseHook (initState) {const [variable, setVariable] = useState(initState) return variable; } // Use custom hook export default function useState_Demo() {const variableState = useHook(0)}Copy the code

You may wonder, do multiple components share state using the same Hook?

The answer is: no. Because the built-in hook of React is called independently and does not affect each other, the custom hook is repeatedly called independently and does not affect each other