使用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也是类似的情况，你学会了?

End

点击阅读原文：获取源代码