使用 Context 和 Hooks 来管理状态

Web开发实践 专栏收录该内容
19 篇文章 1 订阅

一个页面的数据可能来源于很多地方,比如用户信息,数据列表,提示内容,我们可以使用上下文中定义的全局状态,和自定义Hooks通过API调用来简化组件的通讯。

创建上下文Content

// Context.js

import React, { useState } from "react";

const Context = React.createContext([{}, () => {}]);

const Provider = props => {
  const [state, setState] = useState({
    userFlow: {...},
    otherData: {...},
    aLotOfData: [...]
  }); // 上下文中的状态包含这些数据
  return <Context.Provider value={[state, setState]}>{props.children}</Context.Provider>;
};

export { Context, Provider };

编写自定义Hooks

// hooks/useUserFlowData.js

import { useContext } from "react";
import { Context } from "../Context";

const useUserFlowData = () => {
  const [state, setState] = useContext(Context); // Our values from Context

  const updateData = name => {
    setState(prevState => ({
      ...prevState,
      userFlow: {
        ...userFlow,
        name: name
      }
    }));
  }; // 更新状态的方法

  // 返回你需要的部分数据在组件中使用
  return {
    data: state.userFlow,
    updateData
  };
};

export default useUserFlowData;

在组件中使用Hooks

// components/UserData.js

import React from "react";

import useUserFlowData from "../../hooks/useUserFlowData";

export default () => {
  const { data, updateData } = useUserFlowData(); // 我们的状态和更新状态方法

  return (
    <div>
      <span>{data.name}</span>
      <button onClick={() => updateData("张三")}>Update</button>
    </div>
  );
};

展示到页面中

// App.js

import React from 'react';
import './App.css';
import UserData from './components/UserData'
import { Provider } from './Context'

function App() {
  return (
    <Provider>
      <UserData></UserData>
    </Provider>
  );
}

export default App;

我们现在只定义了一个修改用户信息的Hooks函数,之后再定义其他Hooks也是类似的情况,你学会了?

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值