记录一下不同文件对于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>
)
}
总结
- 思维惯性,出现这个主要原因,在于我要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只能定义在函数式组件中