import { useState } from "react";import PropTypes from "prop-types";const infoMap = { inParamsInfo:'传入的初始值是：', nowInfo: '现在的结果是：', middleInfo: '，', resetInfo: '重置', addInfo:'加一', subInfo: '减一',}export default function CounterHook(props) { let initialCount = props.initialCount || 0; const [count, setCount] = useState(initialCount); return ( <> {infoMap.inParamsInfo} {initialCount} {infoMap.middleInfo} {infoMap.nowInfo} {count}{infoMap.middleInfo} <button onClick={() => setCount(initialCount)}> {infoMap.resetInfo} </button> <button onClick={() => setCount(prevCount => prevCount - 1)}> {infoMap.subInfo} </button> <button onClick={() => setCount(prevCount => prevCount + 1)}> {infoMap.addInfo} </button> </> );}// 添加 prop 类型验证CounterHook.propTypes = { initialCount: PropTypes.number,};// 添加默认值CounterHook.defaultProps = { initialCount: 0,};import React, {useReducer} from "react";const initialState = 0;const myContext = React.createContext();function reducer(state, action){ switch(action.type){ case 'reset': return initialState; case 'increment': return {count: state.count + 1}; case 'decrement': return {count: state.count - 1}; default: return state; }}const ContextProvider = props => { const [state, dispatch] = useReducer(reducer, {count: 0}); return ( <myContext.Provider value={{state, dispatch}}> {props.children} </myContext.Provider> );}export {reducer, myContext, ContextProvider};import React,{useState, useMemo} from "react";const Child = ({age, name, children}) => { console.log(age, name, children, 'Child'); function nameChange(){ console.log(age, name, children, 'nameChange'); return name + 'change'; } const changeName = useMemo(() => nameChange(), [name]); return ( <div style={{border: '1px solid black'}}> <p>children: {children}</p> <p>name: {name}</p> <p>changed: {changeName}</p> <p>age: {age}</p> </div> );};const MemoHook = () => { const [age, setAge] = useState(18); const [name, setName] = useState('李四'); return ( <div> <button onClick={()=>{setName('李哈哈'); }}>改名字</button> <button onClick={()=>{setAge(19);}}>改年龄</button> <p> UseMemo {name}: {age} </p> <Child age={age} name={name} >{name}的children</Child> </div> );}export default MemoHook;import React,{useState, useRef} from "react";const RefHook = () => { const [name, setName] = useState('李四'); const valueRef = useRef(null); function addRef(){ valueRef.current.value = name; console.log(valueRef.current.value); } return ( <div> <input defaultValue={name} onChange={(e) => setName(e.target.value)} /> <button onClick={addRef}>给下面插入名字</button> <p>给我个UseRef名字：</p> <input ref={valueRef} /> </div> );};export default RefHook;import CounterHook from "./CounterHook";import MemoHook from "./MemoHook";import RefHook from "./RefHook";import { ContextProvider } from "./ReducerHook";export default function CompositiveHook() { return ( <div> <h3>Hook API的综合示例</h3> <CounterHook initialCount={1} /> <h3>useReducer</h3> <ContextProvider children={2}/> <h3>useMemo</h3> <MemoHook /> <h3>useRef</h3> <RefHook /> </div> );}