Javascript 使用React钩子将setState传递给子组件

我很好奇将

setState

作为道具传递给子组件（哑组件）是否违反了任何“最佳实践”，或者是否会影响优化

下面是一个示例，其中父容器将

state

和

setState

传递给两个子组件，其中子组件将调用

setState

函数

我没有在子类中显式调用

setState

，它们引用一个服务来处理状态属性的正确设置

export default function Dashboard() {

    const [state, setState] = useState({
        events: {},
        filters: [],
        allEvents: [],
        historical: false,
    });


    return (
        <Grid>
            <Row>
                <Col>
                    <EventsFilter
                        state={state}
                        setState={setState}
                    />
                    <EventsTable
                        state={state}
                        setState={setState}
                    />
                </Col>
            </Row>
        </Grid>
    )
}

---

到目前为止，我还没有注意到任何状态问题。

一个好的做法是创建一个处理函数，委托给

setState

函数，并将此函数传递给子组件。

可以从子组件调用函数来设置父组件的状态，但是，在进行此操作时，需要记住几件事

1） 我希望您实际上没有将函数调用为“setState”，因为从纯语法的角度来看，通常您不希望这样做

---

2） 当从子函数中调用函数时，请意识到您影响的是父函数的状态，而不是子函数的状态。如果您不知道要操作哪些数据以及从何处操作数据，这可能会导致一些令人不快的结果。

为什么这是一个好做法？它改进了什么？谢谢！是的，我应该补充一点，我不是直接给setState打电话。我创建了一个服务，用于区分要设置的状态属性。我认为，从孩子的角度来看，如果我们将

setState

称为道具，这并没有错。如果孩子从prop设置自己的状态，然后更新它（这是到目前为止常见的React流），那么这个孩子就不再是哑巴了。这可能会加快编码速度，但会降低可读性。

function actions(setState) {
    const set = setState;
    return function () {
        return ({

            setEvents: (events) => set((prev) => ({
                ...prev,
                events,
            })),

            setAllEvents: (allEvents) => set((prev) => ({
                ...prev,
                allEvents,
            })),

            setFilters: (name, value) => set((prev) =>
                ({
                    ...prev,
                    filters
                })
            ),
        })
    }
}