What are the Hooks?

First, among other things, it writes clean code

A class of writing:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }
  addNum = () => {
    this.setState((prevState) => ({
      num: prevState.num + 1
    }))
  }
  render() { 
    return( <div> <p>{this.state.num}</p> <button onClick={this.addNum}>Chlick me</button> </div> ); }}export default App;
Copy the code

Which is the result of hooks:

import React, { useState } from 'react';

const App = () => {
  const [num, setNum] = useState(0)

  return (
    <div>
      <p>{num}</p>
      <button onClick={() => {setNum(num + 1)}}>Add</button>
    </div>
  )
}
 
export default App;
Copy the code

Say goodbye to state, say goodbye to life cycle, say goodbye to class, and most importantly, we don’t have to bind this! With this basic 👋

Which of the following are hooks that are used in the system: use useState. Which of the following are hooks that are used in the system

A declarative way

const [num, setNum] = useState(0)
Copy the code

Const [variable name, function name] = useState(initial value)Copy the code

Using ES6 destruct assignment, the variable and function names are arbitrary, but for the sake of our own identification, the function names are used to write setFunc.

Of course we can declare more than one variable

const [num1, setNum1] = useState(0)
const [num2, setNum2] = useState({age: 25})
const [num3, setNum3] = useState ([1, 2, 3])...Copy the code

UseState not only accepts primitive types and objects, arrays, but can also pass in a function, which is executed only once.

import React, { useState } from 'react';

const App = ({price}) => {
  const [num, setNum] = useState(() => price || 5)

  return (
    <div>
      <p>{num}</p>
      <button onClick={() => {setNum(num + 1)}}>Add</button>
    </div>
  )
}
 
export default App;
Copy the code

This is easy, just put the variable name in JSX and it’s OK, but not this.state as before.

<p>{num}</p>
Copy the code

use

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

const App = ({price}) => {
  const [num, setNum] = useState(() => price || 5)

  useEffect(() => {
    console.log('num change executes useEffect')})return (
    <div>
      <p>{num}</p>
      <button onClick={() => {setNum(num + 1)}}>Add</button>
    </div>
  )
}
 
export default App;
Copy the code

UseEffect is executed once for the first rendering and data changes, so useEffect is equal to componentDidMount + componentDidUpdate ** UseEffect is asynchronous, so it does not block the rendering view of a page, but componentDidMount + componentDidUpdate is synchronous. Use the useLayoutEffect if you want to measure the width and height of the layout

So let’s implement componentWillUnmount

To implement componentWillUnmount, you must return a function to unbind. Look at the code

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

const App = () => {
  const [num, setNum] = useState(0)
  const [width, setWidth] = useState(document.body.clientWidth)

  const onChangeSize = () => {
    setWidth(document.body.clientWidth)
  }
	
  useEffect(() => {
    console.log('First render and changes to data are performed')
    window.addEventListener('resize', onChangeSize)
    return () => {
      console.log('Unload components and change data execution')
      window.removeEventListener('resize', onChangeSize)
    }
  })

  return (
    <div>
      <p>{width}</p>
      <button onClick={() => {setNum(num + 1)}}>Add</button>
    </div>
  )
}
 
export default App;
Copy the code

As we can see from the code, we can unbind by returning a function. However, if you modify num data, return will also perform the useEffect execution order

1. Page rendering, console.log(‘ first rendering and data changes are performed ‘), return function not executed
2. After changing data, return functions console.log(‘ unload component and change data execution ‘) and console.log(‘ first render and change data execution ‘)

We can see that our requirement implementation is problematic, I want to implement listening in **componentDidMount **, componentWillUnmount implementation unbind, but because change data also perform unbind operation, this is problematic, so we need the second function useEffect

So let’s implement the above requirements

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

const App = () => {
  const [num, setNum] = useState(0)
  const [width, setWidth] = useState(document.body.clientWidth)

  const onChangeSize = () => {
    setWidth (document. Body. ClientWidth)} / / implementation requirements useEffect useEffect (() = > {/ / componentDidMount window. The addEventListener ('resize', onChangeSize)
    return () => {
      // componentWillUnmount
      window.removeEventListener('resize', onChangeSize)
    }
  }, [])

  useEffect(() => {
    // componentDidMount + componentDidUpdate
    document.title = num
  })

  useEffect(() => {
    // componentDidMount
    setTimeout(() => {
      console.log('the ajax request'})}, 1000), []) useEffect (() = > {the console. The log (` num change for${num}`)
  }, [num])

  return (
    <div>
      <p>{width}</p>
      <button onClick={() => {setNum(num + 1)}}>Add</button>
    </div>
  )
}
 
export default App;

Copy the code

Passing an empty array means that the useEffect is no longer relevant to the data.

In fact, this array is used to tell useEffect who is affected by it. Since you wrote an empty array, it has nothing to do with any state data. If you want to associate the number of states, line 33 of the code above clearly states that only num can affect its useEffect. You also write multiple states to disassociate this useEffect.

UseEffect can be written multiple times. It’s not going to have to be written all together and make a lot of judgments like the previous statement cycle

So let’s make a summary

useContext

Helps us get the variables passed across the hierarchy of components

Here’s a 🌰:

First of all, we have a situation where the grandfather component App, the son component Detail, and the grandson component Btn. The grandfather has a variable to pass to the grandson, but it is very troublesome to pass it to the son. Generally, we need props to pass it to the son. But obviously if the grandfather is older and has a great grandchild, then we’re in more trouble. PS: Context and redux are not dealing with the same thing, one is dealing with passing values, one is dealing with global data management

App.js import React, {useState, createContext} from'react';
import Detail from './Detail'
const NumContext = createContext()

const App = () => {
  const [num, setNum] = useState(0)

  return (
    <div>
      <p>{num}</p>
      <button onClick={() => {setNum(num + 1)}}>Add</button>
      <NumContext.Provider value={num}>
        <Detail />
      </NumContext.Provider>
    </div>
  )
}
 
export {App, NumContext};
Copy the code

Detail Btn import React, {useContext} from'react'
import { NumContext } from './App'

const Detail = () => {
  return <div id="Detail"><Btn /></div>
}

const Btn = () => {
  const num = useContext(NumContext)
  return <button>{num}</button>
}

export default Detail
Copy the code

You want to implement context in total points

1. Create createContext

const NumContext = createContext()
Copy the code

2. Using the component that we’ve created we’ll write a closing tag where value is the variable that you want to provide

< numContext. Provider value={num}> // Component.. </NumContext.Provider>Copy the code

3. In the grandchild component, import the context component that you created on the parent, and use our hooks to get the value

import React, {useContext} from 'react'
import { NumContext } from './App'

const Btn = () => {
  const num = useContext(NumContext)
  return <button>{num}</button>
}
Copy the code

From this we can see that no matter how many levels, it is accessible

UseContext UseReducer implements Redux

Let me briefly share my understanding of using the hooks feature to implement similar functionality in Redux

The directory is as follows:

In fact, the same way as before, a little bit different

The first is index – this file is the root file, and we make store data available to all components throughout the project:

// index.js 
import React from 'react'
import {Color} from './store/state'
import Home from './components/Home'

const App = () => {
  return(< div > < Color > {/ * contains all subcomponents, here in the Home, for example * /} < Home / > < / Color > < / div >)}export default App
Copy the code

👇 Look at the contents of the store, in fact, the store file has been imported above

// state.js

import React, { createContext, useReducer } from 'react'
import {reducer} from './reducer'// 1. DefaultState const defaultState = {color:'blue'} // 2. Create a context that allows all wrapped components to get state, dispatchexport const DataContext = createContext()

exportConst Color = props => {// 3. UseReducer props => {// 3. dispatch] = useReducer(reducer, defaultState)return (
    <DataContext.Provider value={{state, dispatch}}>
      {props.children}
    </DataContext.Provider>
  )
}
Copy the code

At this point, we are more than halfway there. Since we have put state and dispatch into value, all components can get state globally

Now this is easy.

// reducer.js

import { UPDATE_COLOR } from './constants'

export const reducer = (state, action) => {
  switch (action.type) {
    case UPDATE_COLOR:
      return {color: action.color}
    default:
      return state
  }
}
Copy the code

// constants.js

export const UPDATE_COLOR = 'UPDATE_COLOR'
Copy the code

// actionCreators.js

import { UPDATE_COLOR } from './constants'

export const updateColor = (color) => ({
  type: UPDATE_COLOR,
  color
})
Copy the code

So we’re done here

The demo code

useRef

UseRef can help us to obtain an object with the same lifetime

import React, { useState, useRef } from 'react';

const App = () => {
  let [num, setNum] = useState(0);
  return (
      <div>
          <Children />
          <button onClick={() => setNum({ num: num + 1 })}>+</button>
      </div>
  )
}

let input;
function Children() {
    const inputRef = useRef()
    console.log(input === inputRef)
    input = inputRef
    return <input type="text" ref={inputRef} />
}

export default App;

Copy the code