旧版Context
旧版Context存在一个致命的问题：
-
就是如果使用context的组件使用了shoudComponentUpdate，会导致context改变时，无法触发组件刷新的问题，导致数据和视图不同步；
-
多个context使用的时候容易混乱；
案例：
// 父组件 Aimport PropTypes from 'prop-types';class A extends React.Component {
getChildContext() {
return {color: "red"};
}
}A.childContextTypes = {
color: PropTypes.string
};//子组件 B
class B extends React.Component {
console.log(this.context.color);
render() {
return
}}B.contextTypes = {
color: PropTypes.string
};
React16.3发布新版Context
// Class 组件中的用法
//context.jsimport { createContext } from "react";
export const context = createContext();
// index.js
import { context } from "./context";
<context.Provider value={{ light: light.value }}>
<Chilren />
</context.Provider>// children.js
//用法 1
import { context } from "./context";
<context.Consumer>
{(data) => {
return <div>我是个孩子组件{data.light}</div>;
}}
</context.Consumer>
//用法 2
static contextType = context;
然后通过 this.context 来获取
//用法 3 函数组件
import { context } from "./context";
const cont = React.useContext(context);
特性：
-
Provider和Consumer必须依赖同一context对象；(多个context混合使用的时候更加清晰)
-
context内容发生变化时，子组件的更新不受shouldComponentUpdate或React.memo()影响；(容易产生性能问题)
-
Consumer采用了Render Props模式；
本人context踩的坑，因为采用了formrender的form，每次表格改变，form都会更改，导致依赖该context中form的组件都会重新执行，严重消耗性能；
React16发布的新版context会替代redux吗？
Redux 解决的是大型项目数据流传输的问题；单向数据流、状态集中管理是Redux的"卖点"；context 处理的是多层级组件之间的数据传输；所以说两者虽然有相似点，但是所解决的核心点不同，之所以迷惑，其实主要因为redux可以完成context的工作，context在简单项目一定程度上也可以替代下redux；
Rematch官方介绍中有一句话：Redux不会消失，也不应该消失。不知道是王婆卖瓜自卖自夸，还是果真如此？不过说真的Rematch挺好用。
React正常的刷新，子组件没有改动，即使子组件未依赖父组件任何东西，也会跟着刷新吗？
会的，会重新刷新，但不会重新渲染； 所以建议React.memo或者PureComponent来优化； 当然了js的执行效率很快，这点消耗对于主性能来说微不足道，但是对于特殊场景，例如列表的Item、子元素相当多的场景，添加React.memo来处理还是有必要的；
