Create a function component

Const Hello = (props) => {return <div>{props. Message}</div>} Function Hello(props){return <div>{props. Message}</div>}Copy the code

Function components replace class components

Function components can replace class components because their syntax is easier to understand, but they face two problems

  • There is no state
  • There is no life cycle

2. No state solution

React V16.8.0 has an Hooks API, which uses ESTATE to fix this problem

Note: useState cannot use if… else

Import React, {useState, useEffect} from "React" const App = props =>{// remove this const [n, SetN] = react.usestate (0); setN = react.usestate (0); Const onClick = () => {setN(n+1)} return {<div> {n}, <button onClick = {onClick}>+1</button> </div>}}Copy the code

3. No lifecycle solution

React v16.8.0 introduced Hooks API with useEffect to fix this problem

The default is called for each rendering

Import React, {useState, useEffect} from "React" useEffect(()=>{console.log(' data updated ')},)Copy the code

UseEffect takes a function as an argument. The second argument says when is it called

simulationcomponentDidMount

Import React, {useState, useEffect} from "React" useEffect(()=>{console.log(' first render ')},[])Copy the code

The empty array for the second argument means that only the first call, and the result is that the update UI will not print after clicking the button, to simulate componentDidMount

simulationcomponentDidUpdate

React.useeffect (()=>{console.log('n changed ')},[n])Copy the code

When you want that data updated, you execute the code, you put that data in the array. It only triggers if n changes. If m changes, it doesn’t execute.

The React. UseEffect (() = > {the console. The log (' n, m)}, / n, m)Copy the code

Arrays can also accept multiple data

React.useeffect (()=>{console.log('state changed ')})Copy the code

If you have more than one piece of data in state, and you want to execute this function regardless of which piece of data changes, you don’t write the second argument. So if you have n and M, you print either n plus 1 or M plus 1

But useEffect also fires on the first render. The first time we render in the class component is not triggered, only when the data changes.

simulationcomponentWillUnmount

import React, { useState, Return ()=>{console.log(' component dying ')}}) return ()=>{console.log(' component dying ')}})Copy the code

The return function is executed on destruction, so you need to put the things you want to do before the component dies after the return

Const App = (props) = > {const [childVisible setChildVisible] = React. UseState (true) / / in front of the array is read, write, is behind the Const hide=()=>{setChildVisible(false)} const show=()=>{setChildVisible(true)} return (<div> {childVisible? <Child /> : null} {childVisible? <button onClick={hide}>hide</button> : <button onClick={show}>show</button>} </div> ) } const Child=()=>{ React.useEffect(()=>{ return ()=>{ The console. The log (' child died); } }) return <div>Child</div> }Copy the code

When the hide button is clicked, the Child disappears and prints. If multiple UseEffects exist, they are executed in the order in which they appear.

Customize the Hook

When using react.useEffect () to simulate function execution after update, such as n after update, it counts the first render as well. Is there any way to make it not count as the first rendering, but only when n actually changes.

You can define a custom hook function, which must start with use

import React, { useState, useEffect } from "react" const useUpdate = (fn, dep) =>{ const [count, setCount] = useState(0) useEffect(()=>{ setCount(x=> x + 1) }, [dep]); / / the dep is equivalent to n useEffect (() = > {the if (count > 1) {fn ()}}, [the count, fn]); } useUpdate(()=>{console.log(' changed ')}, n)Copy the code

Four useLayoutEffect.

  • useEffectIs executed after the browser has rendered the real DOM node.
  • useLayoutEffectWill be executed after the virtual DOM=> real DOM, before the browser draws.
  • There is a time difference between these two,useLayoutEffectAlways thanuseEffectTo perform first
  • But we use them firstuseEffect. What to let the browser render it out in advance, otherwise affect the user experience.