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.
useEffect
Is executed after the browser has rendered the real DOM node.useLayoutEffect
Will be executed after the virtual DOM=> real DOM, before the browser draws.- There is a time difference between these two,
useLayoutEffect
Always thanuseEffect
To perform first - But we use them first
useEffect
. What to let the browser render it out in advance, otherwise affect the user experience.