使用 Context 和 Hooks 来管理状态

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