Reacthook超详细教程

//语法:
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>
</>
)
}