Introduction to 10 Hooks in React

import React from 'react';
import './App.css';
//Usually write a class to change the state class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      hook:'react hook is really useful'
    }
  }
  changehook = () => {
    this.setState({
      hook: 'I changed the value of react hook'
    })
  }
  render () {
    const { hook } = this.state
    return(
         <header className="App-header">
          {hook}
          <button onClick={this.changehook}>
            Change hook
          </button>
        </header>
      )
  }
}
export {App}

//Functional writing, change state function App() {
//Created a variable called hook, the sethook method can change this variable, the initial value is 'react hook is really useful'
 const [hook, sethook] = useState("react hook is really useful");
  return ( 
    <header className="App-header">
      {hook}{/**The variables and methods here can also be used directly*/}
      <button onClick={() => sethook("I changed the value of react hook")}>
        Change hook
      </button>
    </header>
  );
}
export {App}

// Arrow function writing, change state export const App = props => {
  const [hook, sethook] = useState("react hook is really useful");
  return (
    <header className="App-header">
      {hook}
      <button onClick={() => sethook("I changed the value of react hook")}>
        Change hook
      </button>
    </header>
  );
};

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

//Writing of arrow function, changing state const UseEffect = (props) => {
 //Created a variable called hook, the sethook method can change this variable, the initial value is 'react hook is really useful'
 const [ hook, sethook ] = useState('react hook is really useful');
 const [ name ] = useState('baby张');
 return (
  <header className="UseEffect-header">
   <h3>UseEffect</h3>
   <Child hook={hook} name={name} />
   {/**The above variables and the following methods can also be used directly*/}
   <button onClick={() => sethook('I changed the value of react hook' + new Date().getTime())}>Change hook</button>
  </header>
 );
};

const Child = (props) => {
 const [ newhook, setnewhook ] = useState(props.hook);
 //This can replace the previous componentDidMount. The second parameter is an empty array, indicating that useEffect is executed only onceuseEffect(() => {
  console.log('first componentDidMount');
 }, []);

 //The second parameter, the array is the hook. When the hook changes, useEffect will be triggered. When the hook changes, it will be destroyed first and then the first function will be executed.
 useEffect(
  () => {
   setnewhook(props.hook + '222222222');
   console.log('useEffect');
   return () => {
    console.log('componentWillUnmount ');
   };
  },
  [ props.hook ]
 );

 //useLayoutEffect forces the execution of useeffect to be synchronous, and executes the function useLayoutEffect inside useLayoutEffect first.
  () => {
   console.log('useLayoutEffect');
   return () => {
    console.log('useLayoutEffect componentWillUnmount');
   };
  },
  [ props.hook ]
 );

 return (
  <div>
   <p>{props.name}</p>
   {newhook}
  </div>
 );
};

export default UseEffect;

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

const Child = ({ age, name, children }) => {
    //When useMemo is not used for processing, as long as the state of the parent component changes, the child component will be rendered once. With useMemo, you can monitor a certain state name. When the name changes, execute the first function in useMemo console.log(age, name, children, '11111111');
 function namechange() {
  console.log(age, name, children, '22222222');
  return name + 'change';
    }
     {/** Although the react official website says that useCallback and useMemo have similar functions, I don't know what the version problem is. This method cannot be used yet. const memoizedCallback = useCallback(
        () => {
            console.log('useCallback')
        },
        [name],
      );
    console.log(memoizedCallback,'memoizedCallback')
     */}
    //useMemo has two parameters, just like useEffect, the first parameter is a function, the second parameter is an array, used to monitor a state that does not change const changedname = useMemo(() => namechange(), [ name ]);
 return (
  <div style={{ border: '1px solid' }}>
   <p>children: {children}</p>
   <p>name: {name}</p>
   <p>changed: {changedname}</p>
   <p>age:{age}</p>
  </div>
 );
};

const UseMemo = () => {
    //useState sets the name and age, and uses 2 buttons to change them, passing them to the Child component const [ name, setname ] = useState('baby张'); 
 const [ age, setage ] = useState(18);
 return (
  <div>
   <button
    onClick={() => {
     setname('baby张' + new Date().getTime()); 
    }}
   >
    Change name</button>
   <button
    onClick={() => {
     setage('age' + new Date().getTime());
    }}
   >
    Change age</button>
   <p>
    UseMemo {name}:{age}
   </p>
   <Child age={age} name={name}>
    Children of {name}
   </Child>
  </div>
 );
};

export default UseMemo;

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

const UseRef = () => {
 //Here useState binds an input and associates a state name
 const [ name, setname ] = useState('baby张');
 const refvalue = useRef(null); // Create an empty useRef first
 function addRef() {
  refvalue.current.value = name; //Assign a value to this ref when clicking the button // refvalue.current = name //When written like this, even if the ref is not bound to the DOM, the value will still exist in the created ref and can be used console.log(refvalue.current.value);
 }
 return (
  <div>
            <input
                defaultValue={name}
    onChange={(e) => {
     setname(e.target.value);
                }}
   />
   <button onClick={addRef}>Insert the name below</button>
   <p>Give me a UseRef name:</p>
   <input ref={refvalue} />
  </div>
 );
};

export default UseRef;

import React, { useState, useContext, createContext } from 'react';

const ContextName = createContext();
//Here, for the convenience of blogging, the grandpa and grandson components are written in one file. Normally, the context created by the grandpa component and the grandson component needs to be introduced one by one.

const UseContext = () => {
 //Here useState creates a state, and the button controls the change const [ name, setname ] = useState('baby张');
 return (
  <div>
   <h3>UseContext Grandpa</h3>
   <button
    onClick={() => {
     setname('baby张' + new Date().getTime());
    }}
   >
    Change Name</button>
   {/**This is the same as the context usage. The provider needs to pass the value to the child component. The value is not necessarily a parameter*/}}
   <ContextName.Provider value={{ name: name, age: 18 }}>
    {/**Subcomponents that need to use variables must be written in the middle of the provider to achieve sharing*/}
    <Child />
   </ContextName.Provider>
  </div>
 );
};

const Child = () => {
 //Create a son component and introduce the grandchild component return (
  <div style={{ border: '1px solid' }}>
   Child
  </div>
 );
};

const ChildChild = () => {
 //Create a grandchild component, accept the state of the grandchild component, and use useContext to get the value of ContextName created by the grandchild component let childname = useContext(ContextName);
 return (
  <div style={{ border: '1px solid' }}>
   ChildChild Grandchild
    {childname.name}:{childname.age}
   </p>
  </div>
 );
};

export default UseContext;

import React, { useState, useReducer, useContext, createContext } from 'react';

// Initialize stroe's type, initialization value, and create reducer
const ADD_COUNTER = 'ADD_COUNTER';
const initReducer = {
 count: 0
};
//Normal reducer writing function reducer(state, action) {
 switch (action.type) {
  case ADD_COUNTER:
   return { ...state, count: state.count + 1 };
  default:
   return state;
 }
}

const CountContext = createContext();
//In the above paragraph, the state is initialized and the reducer creates the context. You can write a separate file. Here, for ease of understanding, I put it in a file const UseReducer = () => {
 const [ name, setname ] = useState('baby张');
 //Use useReducer in the parent component. The first parameter is the reducer function, and the second parameter is state. The returned value is state and dispatch.
 const [ state, dispatch ] = useReducer(reducer, initReducer);
 return (
  <div>
   UseReducer
   {/* Here, we pass the reducer and state to the child component through context*/}
   <CountContext.Provider value={{ state, dispatch, name, setname }}>
    <Child />
   </CountContext.Provider>
  </div>
 );
};

const Child = () => {
 //Like normal context acceptance, accept the value of the parent component, trigger the reducer through events, etc., to achieve the redux effect const { state, dispatch, name, setname } = useContext(CountContext);
 function handleclick(count) {
  dispatch({ type: ADD_COUNTER, count: 17 });
  setname(count % 2 == 0 ? 'babybrother' : 'baby张');
 }
 return (
  <div>
   <p>
    {name} is {state.count} years old this year</p>
   <button onClick={() => handleclick(state.count)}>Grown up</button>
  </div>
 );
};

export default UseReducer;