react context 不同文件下的应用

记录一下不同文件对于context的调用

第一步 - 创建

在根节点或者改数据应用的组件树的根节点,使用createContext创建出实例,
使用.provider包裹需要共享数据的子节点,export 导出这个实例

let obj = {width:1024};
export let GlobolWidth = createContext(obj);

第二步 - 引入

Context.Consumer 让你在函数式组件中完成订阅 context。
Class.contextType 让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它
这两句是官网对于context使用的说明,很明显,要用就要拿到实例,这也是为什么之前要export出实例的原因

import React from 'react';
import { GlobolWidth } from '../App';

export default () => {
    return (
        <GlobolWidth.Consumer>
            {
                value=><span>{value.width}</span>
            }
        </GlobolWidth.Consumer>
    )
}

总结

1. 思维惯性,出现这个主要原因,在于我要export为什么不直接export一个对象,还这么烦的弄这么多骚操作

解: 需要传递变量

//App.js
import React, { createContext, useState } from 'react';
import './App.css';

import Demo from './demo/useContext';

let obj = { width: 1024 };

export let GlobolWidth = createContext(null);
function App() {
  let [width,changewidth] = useState(obj.width);
  return (
    <div>
      <GlobolWidth.Provider value={{width,changewidth}}>
        <Demo show={{ a: 1 }}></Demo>
      </GlobolWidth.Provider>
      <button onClick={()=>changewidth(width - 100)}>减少</button>
    </div>
  );
}

export default App;

//./demo/useContext.jsx
import React from 'react';
import { GlobolWidth } from '../App';

export default (...arr) => {
    return (
        <GlobolWidth.Consumer>
            {
                value=>(
                    <div>
                        <span>{value.width}</span><br />
                        <button onClick={()=>value.changewidth(value.width + 100)}>增加</button>
                    </div>
                )
            }
        </GlobolWidth.Consumer>
    )
}

通过传递修改值得方法,触发所有用到这个值得组件更新
hooks只能定义在函数式组件中