react Context

import React,{ useState,useEffect,useContext } from "react";
import axios from "axios";
import Mock from "mockjs";

Mock.mock("/mock/a","post",opt => {
  const body = JSON.parse(opt.body);
  return Mock.mock({
    code: body.p >= 3 ? 1 : 0,"data|2": [
      {
        "id|+1": 1,label: "@word",},],// data: [],});
}).setup({
  timeout: 1200,});

const l = console.log;
const BodyContext = React.createContext("body");

function Test(props) {
  // return <Hello body={`hello world`} />;
  return (
    <BodyContext.Provider value="hello ajanuw">
      <Hello />
    </BodyContext.Provider>
  );
}

function Hello({ body }) {
  return <World />;
}
function World(props) {
  // return <div>{props.body}</div>;

  // return (
  //   <BodyContext.Consumer>
  //     {body => <div>{body}</div>}
  //   </BodyContext.Consumer>
  // );
  const body = useContext(BodyContext);
  return <div>{body}</div>;
}
export default Test;

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...