3. 前端设计模式之数据提供者模式

同时为多个子组件提供数据

数据提供者模式有点像Java Web程序中常用的DAO层，专门负责提供数据。

在React中向组件传递数据一般用props，但是props只支持按层级一层一层组件的传递，也就是孙子们如果需要某个数据，爷爷必须先提供给爸爸，无论爸爸是不是也需要为了传递必须过这么一手,像代码：

function App() {
  const data = { ... }
 
  return (
    <div>
      <SideBar data={data} />
      <Content data={data} />
    </div>
  )
}
 
const SideBar = ({ data }) => <List data={data} />
const List = ({ data }) => <ListItem data={data} />
const ListItem = ({ data }) => <span>{data.listItem}</span>
 
const Content = ({ data }) => (
  <div>
    <Header data={data} />
    <Block data={data} />
  </div>
)
const Header = ({ data }) => <div>{data.title}</div>
const Block = ({ data }) => <Text data={data} />
const Text = ({ data }) => <h1>{data.text}</h1>

中的SideBar、List组件。简单的项目还可以承受，如果组件多了就难于维护了。

在React中可以是用Context创建数据提供者和消费者，谁用谁取，就可以避免无意义的空转了。

const DataContext = React.createContext();//1.创建Context
 
function App() {
  const data = { ... }
 
  return (
                
    <DataContext.Provider value={data}> //使用Context提供者提供数据
      <SideBar />
      <Content />
    </DataContext.Provider>
  )
}
 
const SideBar = () => <List />
const List = () => <ListItem />
const Content = () => <div><Header /><Block /></div>
 
 
function ListItem() {
  const { data } = React.useContext(DataContext);//3.使用数据
  return <span>{data.listItem}</span>;
}
 
function Text() {
  const { data } = React.useContext(DataContext);
  return <h1>{data.text}</h1>;
}
 
function Header() {
  const { data } = React.useContext(DataContext);
  return <div>{data.title}</div>;
}

注意看SideBar和List组件就不用管data了。

React中主题样式信息等都多采用数据提供者模式实现。