react的useEffect 第二个参数

  • Z时代
  • 2024-01-10
  • 分类：综合

react

useEffect第二个参数可以是普通类型、也可以是引用类型。

如果是从props接收来的值，是引用类型的，且是immutable类型的，不要在mapStateToProps里使用toJS，如下：

const mapStateToProps = (state) => {
  return {
    count: state.getIn(['light', 'count']),
    router: state.getIn(['light', 'router']).toJS(),
  }
}

要在组件里使用：

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
function Test(props) {
  const { count, router } = props
  const handleAdd = () => {
    props.onSetState(['count'], count + 1)
  }
  const handleRouter = () => {
    const myRouter = router.toJS()
    myRouter.push({
      id: Date.now()
    })
    props.onSetState(['router'], myRouter)
  }
  useEffect(() => {
    console.log('count发生变化', count)
  }, [count])
  useEffect(() => {
    console.log('router发生变化', router.toJS())
  }, [router])
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => handleAdd()}>加</button>
      <button onClick={() => handleRouter()}>改变router</button>
    </div>
  )
}
const mapStateToProps = (state) => {
  return {
    count: state.getIn(['light', 'count']),
    router: state.getIn(['light', 'router']),
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onSetState(key, value) {
      dispatch({ type: 'SET_LIGHT_STATE', key, value })
    },
    onDispatch(action) {
      dispatch(action)
    },
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Test))

 light.js:

import { fromJS } from 'immutable'
const defaultState = fromJS({
  count: 1,
  router: []
})
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'SET_LIGHT_STATE':
      return state.setIn(action.key, fromJS(action.value))
    default:
      return state
  }
}
export default reducer

以上是 react的useEffect 第二个参数 的全部内容， 来源链接： utcz.com/z/381995.html

回到顶部