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存储中（其值等于startingValue属性），并且在卸载时，我们想从存储中删除该变量。

在没有存储的情况下，我们可以简单地使用useState(props.startingValue)钩子，但是对于存储来说，似乎我们需要构造函数/等效项。我看到的解决方案是实现一个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'})
        }
    }, []);

   //...

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

1 个答案: