另一页

Context使用的一系列问题

Context API是React16推出的一种简单的组件间状态共享方式。在外层创建Context并用Provider包裹内层,在内层可以通过useContext或this.context访问数据。不需要通过props层层传递数据和回调函数,也避免引入Redux和更多复杂度。

遇到的问题:

A. 如果使用函数式组件并且将对象作为context,有可能不会触发更新。这种情况可以考虑给Provider传拷贝的对象而不只是一个引用。也可以改用class组件,因为其可以调用setState与forceUpdate方法。

B. 用Provider组件包裹下层class组件后,下层组件获取到的context为空。发现是我的理解错了,this.context不能自动获取,而需要先指定contextType。(useContext不用)

C. ReferenceError: Cannot access 'MyContext' before initialization

我一定是先创建context再引用,那么为什么会报错呢?我想到了import的问题。我在index.ts里引用app.ts,那么应该是app.ts先加载。这个报错给我上了一课,我才会去想JS如何去执行import。React要求contextType必须是static的,所以在import的时候就会执行,但我初始化MyContext的语句却写在index.ts里面(也就是import后面),导致import的时候读不到。如果我只在constructor里使用MyContext,就不会报这个错,因为constructor执行的时机更晚。React.render()渲染组件时,constructor才会真正触发(对象才真正被创建),那个时候import已经结束了。

D.context做修改后,子组件只有下次渲染才会访问新的context。也就是说不能在js中做更改后立即访问到修改,setTimeout也不行,因为context的引用变了。