import * as React from 'react' ; import "./RecommendHeader.scss" ; import { useSelector , useDispatch , useStore } from 'react-redux' ; import actionsStore from 'src/redux/actions/actions' ; import ThemeColor from '../../pages/FindMusic/FindMusicChild/Recommend/Provider/Provider' ; function RecommendHeader ( props , ref ) { const [ states , setStates ] = React . useState < number > ( 0 ) ; React . useEffect ( ( ) => { const time = setInterval ( ( ) => { setStates ( states + 1 ) ; } , 1000 ) ; return ( ) => clearInterval ( time ) ; } , [ states ] ) ; const memo = React . useMemo ( ( ) => document . title = `更新${ states }次` , [ states ] ) ; console . log ( memo ) ; const user = useSelector ( ( state ) => state . token ) ; const dispatchUser = useDispatch ( ) ; const changeMapStateToProps = ( name ) => React . useCallback ( ( ) => dispatchUser ( actionsStore . setToken ( name ) ) , [ dispatchUser ] ) ; const store = useStore ( ) ; const createRef = React . useRef ( null ) ; React . useImperativeHandle ( ref , ( ) => ( { focus : ( ) => createRef . current . focus ( ) , } ) ) ; console . log ( props , 'props' ) ; const value = React . useContext ( ThemeColor ) ; return ( < div className = "recommendHeader" style = { { color : value } } > { value } { user } { states } { store . getState ( ) . loginType } < button onClick = { changeMapStateToProps ( 'zz' ) } > click < /button> < input type = "text" name = "" id = "" ref = { createRef } / > < /div>); } const RecommendHeaderFinal = React . forwardRef ( RecommendHeader ) ; export default RecommendHeaderFinal ;