使用 Context 和 Hooks 来管理状态

日期：2020-07-23 栏目：前端经验浏览：次

一个页面的数据可能来源于很多地方，比如用户信息，数据列表，提示内容，我们可以使用上下文中定义的全局状态，和自定义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也是类似的情况，你学会了?

————————————————

原文链接：https://blog.csdn.net/wu_xianqiang/article/details/103938810

转载注明出处：http://www.duanlonglong.com/qdjy/837.html

使用 Context 和 Hooks 来管理状态

相关推荐