react hooks useEffect

    As an introduction to react framework development, we first learned about custom components, and then write related processing logic, bind events and so on. For general custom components, we inherit React.Component by writing a class, and then write the main render and other methods. In addition, we may also need to consider the component life cycle componentDidMount, componentDidUpdate these methods, when our component is very simple Sometimes, this is a bit bulky and not conducive to maintenance, such as:

class Hello extends React.Component{
	render(){
		return <div>hello,world</div>
	}
}
export default Hello

    This is one of the simplest react components, but the code inherits React.Component in order to realize the function of the component, and then returns the element in the render () method. In fact, this component does not involve the change of state, so it can be realized in the form of function function, which will be more simple.

export const Hello = () => <div>hello,world</div>

    This is the simplified code, it looks very comfortable, there is no burden. Such components are also called stateless components. Now that React has recommended the use of stateless components to implement React components, then the question also comes. Since the function is used instead of class to define the component, how to maintain the state? How to maintain the life cycle?

    This is the problem solved by react hooks: by defining useState, useReducer, useEffect and other hooks to solve the problem of component state and component life cycle. useEffect can be used as the componentDidMount life cycle in the class by default: it runs only once when the component is mounted. The syntax of useEffect is as follows:

    useEffect (() => {
        // all
    }, [])

     The default useEffect does not need to take the second parameter which is [], which can be abbreviated as follows:

    useEffect (() => {
        // all
    })

     Let's take a look at the following example, we can see that the useEffect method call will be executed once.

import React,{useState,useEffect} from 'react'

const App = ()=>{

	const [allTypes,setAllTypes] = useState([])

	useEffect(()=>{
		//setAllTypes([{id:1,name:'aaa'},{id:2,name:'bbb'}])
		console.log("componentDidMount...")
	})

	return (
			<div>
				<h2>hello,react.</h2>
				<ul>
					{allTypes.map(t=><li key={t.id}>{t.name}</li>)}
				</ul>
			</div>
		)
	
}

export default App

     

    In this example, a function similar to componentDidMount is implemented through useEffect, but there is a big risk. When we open the comment: setAllTypes ([{id: 1, name: 'aaa'}, {id: 2, name: ' bbb '}]), an infinite loop of functions in useEffect will appear on the page.

    

    In fact, by default, if you remove the default parameter [] of useEffect, it will also be executed when the page changes, like the componentDidUpdate life cycle function in the class mode. The solution to this problem is to add this default parameter [] to useEffect.

     

    The page will not report an error and will run normally.

     

    In fact, the second parameter [] of useEffect is an array of monitored objects. When there is no value in the monitored object array, that is, no dependent objects are monitored. At this time, no matter how the page is updated, the problem of wireless loop rendering will no longer occur. . Therefore, it will only run once under the life cycle of similar componentDidMount. Later, during componentDidUpdate, because the listening object is empty, it is considered that no update occurs, so it will not be executed.