React-补充

React多个className的三元表达式写法 — 模板字符串写法

• 举例：固定的样式名：stone， 需要判断的样式名：floatClass
• 注意：三目运算要加小括号。空格的位置
• 示例：<div className={stone ${变量 ? ‘floatClass’ : ‘’}}>模板字符串</div>

跳转页面

import { Link,useNavigate } from 'react-router-dom'
// js写法
let navigate = useNavigate()
function handleClick () {
	navigate("/home")
}

// 组件写法
<Navigate to="/home" replace state={state}/>
// 替代原有的goBack 和goForward
 <button onClick={() => navigate(-1)}>goback</button>
 <button onClick={() => navigate(1)}>goforward</button>

react-redux 的 hooks

• 引入 import { hook } from ‘react-redux’

useSelector() — 从redux的store队形中提取数据(state)

• 示例： const counter = useSelector( state => state.counter)

useDispatch() — 返回Redux store中对dispatch函数的引用

• 简单理解就是把dispatch方法暴露出来使用
• 示例：

  const dispatch = useDispatch()
  <button onClick={() => dispatch({ type: 'increment-counter'})}>julie</button>

• 将dispatch传递给子组件，使用useCallback
• 示例：

  const incrementCounter = useCallback(()=> 
  	dispatch({type: 'increment-counter'}
  ), [dispatch])
  <MyIncrementButton onIncrement={incrementCounter} />

• 然后暴露该组件给其它组件使用

useStore() — 返回redux 组件的store对象的引用

• 示例：

  const store = useStore
  <div>{store.getStore}</div> // 但store中的state更新，这里不会自动跟新，所以适合存放不变的数据