React hook超详细教程

//语法:
import {useState} from "react"
const [state, setState] = useState(initialState)//数组解构赋值
//useState接收一个initialState变量作为状态的初始值，返回值是一个数组。返回数组的第一个元素代表当前state的最新值，第二个元素是一个用来更新state的函数。state和setState这两个变量的命名是你自己取的
//state用于组件内部使用的数据
//setState函数用于修改state,当修改后会触发所有使用过state的地方重新取值(调用render)
//可以用多个useState

import React, { Component,useState } from 'react'
export default function Box3() {
  const [first, setfirst] = useState(0)
  return (
      <div>
      <h1>{first}</h1>
      <button onClick={()=>{setfirst(first+1)}}>点击first+1</button>
      </div>
    )
}

import {useEffect} from "react"
useEffect(effect?=>clean, dependencies?)
//useEffect的第一个参数effect是要执行的副作用函数，它可以是任意的用户自定义函数，用户可以在这个函数里面   操作一些浏览器的API或者和外部环境进行交互,网络请求等，这个函数会在每次组件渲染完成之后被调用
//useEffect可以有一个返回值,返回一个函数,系统在组件重新渲染之前调用它          
//第二个参数dependencies来限制该副作用的执行条件    

import React,{useEffect,useState} from 'react'
export default function Box1(props) {
  let [i,seti]=useState(0)
  useEffect(()=>{
    console.log(i)
   let timer=setInterval(() => {
      seti(i+1)
    },1000);
    return ()=>{
        clearInterval(timer)
    }
  })
  return (
    <div>
        <h1>{i}</h1>
    </div>
  )
}

//父组件
import React,{useState} from 'react'
import Box1 from './Box1'
export default function Box2() {
  let [flag,setflag]=useState(true)
  return (
    <div>
      <button onClick={()=>{setflag(!flag)}}>点击销毁/创建Box1</button>
      {flag&&<Box1></Box1>}
    </div>
  )
}

react
import {useRef} from "react"
const refObject = useRef(initialValue)
//useRef接收initialValue作为初始值，它的返回值是一个ref对象，这个对象的.current属性就是该数据的最新值。使用useRef的一个最简单的情况就是在函数组件里面获取DOM对象的引用

import { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
const AutoFocusInput = () => {
  const inputRef = useRef(null)
  useEffect(() => {
    // 组件挂载后自动聚焦
    inputRef.current.focus()
  }, [])
  return (
    <input ref={inputRef} type='text' />
  )
}
ReactDOM.render(<AutoFocusInput />, document.getElementById('root'))
//在上面代码中inputRef其实就是一个{current: input节点}对象，只不过它可以保证在组件每次渲染的时候拿到的都是同一个对象。

import {useCallback} from "react"
const memoizedCallback = useCallback(callback, dependencies)
//useCallback接收两个参数，第一个参数是需要被记住的函数，第二个参数是这个函数的dependencies，只有dependencies数组里面的元素的值发生变化时useCallback才会返回新定义的函数，否则useCallback都会返回之前定义的函数。

import React,{useCallback,useEffect,useState} from 'react'
export default function Box7() {
  let [arr,setarr]=useState([{id:1,name:'ljy'},{id:2,name:'jack'},{id:3,name:'marry'}])
  let fn=useCallback((index)=>{
      console.log(index)
  },[])
  useEffect(()=>{
      console.log('fn变化了')
  },[fn])
  return (
     <div>
         <>{arr.map(el=><p key={el.id}><span>{el.id}---{el.name}</span></p>)}</>
         <button onClick={()=>{setarr([...arr])}}>点击修改数据</button>
     </div>
  )
}

import {useMemo} from "react"
const memoizedValue = useMemo(() => valueNeededToBeMemoized, dependencies)
//useMemo接收一个函数，该函数的返回值就是需要被记住的变量，当useMemo的第二个参数dependencies数组里面的元素的值没有发生变化的时候，memoizedValue使用的就是上一次的值。

import React, { useMemo } from 'react'
import ReactDOM from 'react-dom'
const RenderPrimes = ({ iterations, multiplier }) => {
  const primes = React.useMemo(() => calculatePrimes(iterations, multiplier), [
    iterations,
    multiplier
  ])
  return (
    <div>
      Primes! {primes}
    </div>
  )
}
ReactDOM.render(<RenderPrimes />, document.getElementById('root'))
//例子中calculatePrimes是用来计算素数的，因此每次调用它都需要消耗大量的计算资源。
为了提高组件渲染的性能，我们可以使用useMemo来记住计算的结果，
当iterations和multiplier保持不变的时候，我们就不需要重新执行calculatePrimes函数来重新计算了，直接使用上一次的结果即可。

const value = useContext(MyContext)
//useContext接收一个context对象为参数，该context对象是由React.createContext函数生成的。
useContext的返回值是当前context的值，这个值是由最邻近的<MyContext.Provider>来决定的。
一旦在某个组件里面使用了useContext这就相当于该组件订阅了这个context的变化，
当最近的<MyContext.Provider>的context值发生变化时，使用到该context的子组件就会被触发重渲染，且它们会拿到context的最新值。

import React, { useContext, useState } from 'react'
import ReactDOM from 'react-dom'
//定义context
const NumberContext = React.createContext()
const NumberDisplay = () => {
  const [currentNumber, setCurrentNumber] = useContext(NumberContext)
  const handleCurrentNumberChange = () => {
    setCurrentNumber(Math.floor(Math.random() * 100))
  }
  return (
    <>
      <div>Current number is: {currentNumber}</div>
      <button onClick={handleCurrentNumberChange}>Change current number</button>
    </>
  )
}
const ParentComponent = () => {
  const [currentNumber, setCurrentNumber] = useState(100)
  return (
    <NumberContext.Provider value={[currentNumber, setCurrentNumber]}>
      <NumberDisplay />    //这里填儿子组件，后面孙子组件就可以直接使用爷爷组件传递的值
    </NumberContext.Provider>
  )
}
ReactDOM.render(<ParentComponent />, document.getElementById('root'))

import React, { useContext, useState } from 'react'
import ExpensiveTree from 'somewhere/ExpensiveTree'
import ReactDOM from 'react-dom'
const ThemeContext = React.createContext()
const ConfigurationContext = React.createContext()
const ChildrenComponent = () => {
  const [themeContext] = useContext(ThemeContext)
  return (
    <div>
      <ExpensiveTree theme={themeContext} />
    </div>
  )
}
const App = () => {
  const [themeContext, setThemeContext] = useState({ color: 'red' })
  const [configurationContext, setConfigurationContext] = useState({ showTips: false })
  return (
    <ThemeContext.Provider value={[themeContext, setThemeContext]}>
      <ConfigurationContext.Provider value={[configurationContext, setConfigurationContext]}>
        <ChildrenComponent />
      </ConfigurationContext.Provider>
    </ThemeContext.Provider>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

import React, { useContext, useState } from 'react'
import ExpensiveTree from 'somewhere/ExpensiveTree'
import ReactDOM from 'react-dom'
const AppContext = React.createContext()
const ExpensiveComponentWrapper = React.memo(({ theme }) => {
  return (
    <ExpensiveTree theme={theme} />
  )
})
const ChildrenComponent = () => {
  const [appContext] = useContext(AppContext)
  const theme = appContext.theme
  return {
    <div>
      <ExpensiveComponentWrapper theme={theme} />
    </div>
  )
}
const App = () => {
  const [appContext, setAppContext] = useState({ theme: { color: 'red' }, configuration: { showTips: false }})
  return (
    <AppContext.Provider value={[appContext, setAppContext]}>
      <ChildrenComponent />
    </AppContext.Provider>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

import React, { useContext, useState, useMemo } from 'react'
import ExpensiveTree from 'somewhere/ExpensiveTree'
import ReactDOM from 'react-dom'
const AppContext = React.createContext()
const ChildrenComponent = () => {
  const [appContext] = useContext(AppContext)
  const theme = appContext.theme
  return useMemo(() => (
      <div>
        <ExpensiveTree theme={theme} />
      </div>
    ),
    [theme]
  )
}
const App = () => {
  const [appContext, setAppContext] = useState({ theme: { color: 'red' }, configuration: { showTips: false }})
  return (
    <AppContext.Provider value={[appContext, setAppContext]}>
      <ChildrenComponent />
    </AppContext.Provider>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

const [state, dispatch] = useReducer(reducer, initialArg, init?)
//useReducer和useState类似，都是用来管理组件状态的，只不过和useState的setState不一样的是，useReducer返回的dispatch函数是用来触发某些改变state的action而不是直接设置state的值，至于不同的action如何产生新的state的值则在reducer里面定义。
//useReducer接收的三个参数分别是：
//reducer: 这是一个函数，它的签名是(currentState, action) => newState，从它的函数签名可以看出它会接收当前的state和当前dispatch的action为参数，然后返回下一个state,也就是说它负责状态转换的工作。
//initialArg：如果调用者没有提供第三个init参数，这个参数代表的是这个reducer的初始状态，如果init参数有被指定的话，initialArg会被作为参数传进init函数来生成初始状态。
//init: 这是一个用来生成初始状态的函数，它的函数签名是(initialArg) => initialState，从它的函数签名可以看出它会接收useReducer的第二个参数initialArg作为参数，并生成一个初始状态initialState

import React,{useReducer} from 'react'
export default function Box3() {
  let redux=(initState,action)=>{   
    if(action.type=='NAME'){   //这里进行判断type是什么，然后修改对应的值
      initState.name=action.value
    }
    initState=JSON.parse(JSON.stringify(initState))  //这一步是状态转换,返回一个新的initState,没有这一步则修改之后不会刷新
    return initState
  }
  let [state,dispatch]=useReducer(redux,{name:'hello'},(arg)=>{
        arg.name="ljy"
        return arg   //return返回的就是初始值
  })
  return (
    <>
    <h1>{state.name}</h1>
    <button onClick={()=>{dispatch({type:'NAME',value:'修改了name'})}}>点击修改</button>
    </>
  )
}

/ctx.ctx.js
import React from 'react'
let ctx=React.createContext()
export default ctx

import React,{useReducer} from 'react'
import ctx from './ctx/ctx'
export default function App(props) {
  let redux=(initState,action)=>{
    if(action.type=='NAME'){
      initState.name=action.value
    }
    initState=JSON.parse(JSON.stringify(initState))
    return initState
  }
  let [state,dispatch]=useReducer(redux,{name:'hello'},(arg)=>{
        arg.name="ljy"
        return arg
  })
  return (
    <ctx.Provider value={[state,dispatch]}>   {/* 传给后代组件state,和修改的方法dispatch */}  
       {props.children}  {/* 相当于Vue中的插槽的用法 */}    
    </ctx.Provider>
  )
}
第三步：index.js文件中挂载

import React from ‘react';
import ReactDOM from ‘react-dom/client';
import App from ‘./App'
import Box1 from ‘./Box1'
const root = ReactDOM.createRoot(document.getElementById(‘root'));
root.render();

import React,{useContext} from 'react'
import ctx from './ctx/ctx'
import Box2 from './Box2'
export default function Box1() {
  let [state,dispatch]=useContext(ctx)
  console.log(state)
  return (
    <>
    <h1>Box1中---{state.name}</h1>
    <button onClick={()=>{dispatch({type:"NAME",value:'ljy666'})}}>修改state</button>
    <Box2></Box2>
    </>
  )
}
import { type } from '@testing-library/user-event/dist/type'
import React,{useContext} from 'react'
import ctx from './ctx/ctx'
export default function Box2() {
  let [state,dispatch]=useContext(ctx)
  return (
    <>
    <h1>Box2中---{state.name}</h1>
    <button onClick={()=>{dispatch({type:'NAME',value:'孙组件修改了'})}}>点击修改</button>
    </>
  )
}