react-animarker高亮效果无法随state变更同步更新问题

• 核心问题出在react-animarker的Mark组件本身的实现：组件内部仅在首次挂载时读取一次传入的duration参数，用来初始化高亮动画的CSS配置，没有对后续duration props的变化做监听和同步更新。所以哪怕父组件里的speed状态已经更新，传入了新的props值，组件内部实际执行动画用的还是初始挂载时拿到的默认值，自然不会有动画时长的变化。
• 你在handleClick里调用setSpeed之后立刻打印拿到的还是旧值，是React useState的正常特性：state更新是异步批量执行的，调用setSpeed的当下，当前函数作用域内的speed还是上一轮渲染的旧值，只有等组件完成重渲染之后，才能拿到更新后的state值，这部分逻辑本身没有问题。

给Mark组件绑定值等于speed的key属性，利用React的key变化时会卸载重建组件的特性，让speed更新时Mark组件重新挂载，就能读取到最新的duration参数完成动画配置更新，修改后的代码如下：

import React, {useState} from 'react'
import {Mark} from 'react-animarker'

const Highlightx = () => {
    const [speed, setSpeed] = useState(5)

    const handleClick = () => {
        setSpeed(20)
    }  

  return (
    <>
    <Mark key={speed} duration={speed}>Highlightx</Mark>
    <button onClick={handleClick}>Hello</button>
    </>
  )
}

export default Highlightx

这个方案仅适合Mark这类逻辑简单、挂载开销极低的轻量组件，如果是逻辑复杂、挂载成本高的组件，不建议用强制重挂载的方式响应props更新。

内容的提问来源于stack exchange，提问作者rj05