Question

在这个例子中，我使用了一个上下文来保存用户数据，但是 useEffect 钩子在组件子级上运行了几次，对于每个更改的状态属性一次，即使名称只更改一次，但相同useEffect 仅在上下文中正确执行一次，为什么会发生这种情况？有办法取消这个效果吗？

上下文组件：

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
    const [name, setName] = useState(null)
    const [user, setUser] = useState(null)
    const [phone, setPhone] = useState(null)

    const init = async () => {
        const res = await profile()

        setName(res.name)
        setUser(res.user)
        setPhone(res.phone)
    }

    useEffect(() => {
        init()
    }, [])

    useEffect(() => {
        console.log('I am context')
    }, [name])

    return (
        <AuthContext.Provider
           value={{
               name
           }}
        >
            {children}
        </AuthContext.Provider>
    )
}

子组件：

const Index = () => {
    
    const { name } = useContext(AuthContext)

    useEffect(() => {
        console.log('I am children')
    }, [name])

    return <View></View>
}

useEffect 和 useContext 的问题，本机反应

0 个答案: