javascript - 在功能组件初始渲染时将变量添加到存储中

Question

假设我们需要一个计数器组件 <Counter startingValue={0}/>这允许我们在 props 中指定起始值，并在 onClick 时简单地增加。

类似于:

const Counter = (props: {startingValue: number}) => {
    const dispatch = useDispatch();
    const variable = useSelector(store => store.storedVariable);

    return <p onClick={dispatch(() = > {storedVariable: variable})}>{variable}</p>;
}

除了，当它安装时，我们希望它将其计数变量存储在 redux 存储中(其值等于startingValue 属性)，并且当它卸载时，我们希望从存储中删除该变量。

如果没有商店，我们可以简单地使用useState(props.startingValue)钩子(Hook)，但是对于商店来说，我们似乎需要构造函数/等效函数。我看到的一个解决方案是实现 useState(isInitialRender)变量并在商店中创建变量或不基于 if 讲师，尽管对我来说这看起来有点复杂的解决方案。我还感觉到我正在尝试做一些违背 React-Redux 哲学的事情。

Answer 1

这就是 useEffect 的那种事情旨在用于。如果为第二个参数(依赖数组)指定一个空数组，那么它将仅在第一次渲染上运行，并且您可以使用 return 函数将其删除。

大致的操作方法如下:

const Counter = (props: {startingValue: number}) => {
    const dispatch = useDispatch();
    const variable = useSelector(store => store.storedVariable);
    useEffect(() => {
        dispatch({type: 'store-starting-value', payload: startingValue})
        return ()=>{
             dispatch({type: 'clear-starting-value'})
        }
    }, []);

   //...