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

Question

假设我们想要一个 Counter 组件<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 存储中存储其计数变量（其值等于 startValue 属性），并且在卸载时，我们希望从存储中删除该变量。

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

标签： javascriptreactjsreduxreact-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'})
        }
    }, []);

   //...