解决React Context导致的重复渲染问题

羊羊羊 1年前 ⋅ 4921 阅读
ad
React Context真的像想象中那么好吗?在使用过程中我们会遇到怎样的坑呢?
现在我就假设用Context代替redux,下面给出一个点击按钮实现数值叠加的小例子:
import React from 'react';
const TestContext = React.createContext();
export default TestContext;
 
因为用到React.createContext()的地方比较多,所以这里给提取出来单独处理。
 
function App() {
const [count, setCount] =useState(0);
return (
<TestContext.Provider value={{ count, setCount }}>
<Parent>
<Borther />
<Child />
</Parent>
</TestContext.Provider>
);
}
export default App;
 
上面例子中的App组件是应用的最顶层组件,渲染出一个Context的Provider,Provider的子组件是应用中其他组件。
App组件内通过useState定义一个state,count和改变state的方法,setCount,并将count和setCount传递给Provider的value属性,在Provider内共享。Provide内的组件可以通过useContext,来获取这两个值。例如在Parent组件内通过useContext来获取setCount,并在button的点击事件中,通过调用setCount来改变count值:
 
const Parent = ({ children }) => {
console.log('Parent Component Render');
const { setCount } =useContext(TestContext);
return (
<div>
<p>这里是父组件</p>
{children}
<button
onClick={() => {
setCount((preCount) =>++preCount);
}}
>
点我+1
</button>
</div>
);
};
export default Parent;
 
子组件代码如下:
 
const Child = () => {
const { count } =useContext(TestContext);
console.log('count: ', count);
return <div>这里是子组件,count: {count}</div>;
};
export default Child;
 
兄弟组件代码如下:
 
import React from 'react';
const Borther = () => {
console.log('Borther Component Render');
return <div>这里有一个兄弟组件</div>;
};
export default Borther;
 
此时,一个完整的界面就出来了,如下,点击button可实现数值的累加:
 
此时功能一切正常,点击按钮确实可以实现累加,但是你有没有发现,当Context.Provider重新渲染的时候,它所有的子组件都被重新渲染了,比如上面例子中子组件有Borther和Child,Child为useContext之一重画没问题,但是Borther不是useContext,也不依赖于Context的value,根本没有必要重画啊!
但是实际打印出来结果如图:
 
 
这是为什么呢?其实,Context.Provider说到底还是组件,也按照组件基本法来办事,当value发生变化时,它也可以不引发子组件的渲染,前提是,子组件作为一个属性(children)也要保持不变才行,如果子组件变了,Context.Provider 也不知道你是不是以前的你,只好让你重画了。我们上面的例子jsx转译成React.createElement运行时类似这样:
 
React.createElement(Context.Provider, {value: ...}, React.createElement('div', {className: ...}, React.createElement(Header), React.createElement(Content), ) )
 
每次渲染都会调用React.createElement(),所以导致每次渲染的子组件都是不一样的,怎么样才能让context.provider知道子组件是没有变化的呢,方法也比较简单,就是建一个独立的组件来管理state和Provider,把子组件的JSX写在这个组件之外。把App改成一个无状态组件,只渲染一次,因为state改为ContextWrapper来管理,每次当ContextWrapper的state被setCount改变而重新渲染的时候,它看到的子组件(children)是App传给他的,不需要重新用React.createElement创建,所以children是不变的,于是Context.Provider也就不会让children重新渲染了,代码如下:
 
const ContextWrapper = ({ children }) => {
const [count, setCount] =useState(0); return (
<TestContext.Provider value={{ count, setCount }}>
{children}
</TestContext.Provider>
);
};
 
function App() {
return (
<ContextWrapper>
<Parent>
<Borther />
<Child />
</Parent>
</ContextWrapper>
);
}
export default App;
 
改进后代码打印如下:
 
 
此时就不会重复渲染brother组件了。
好了,以上就是一个完整的context避坑小指南,context虽好,但使用需谨慎!!!!

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 0   收藏 0
  • 羊羊羊
    共发布9篇文章 获得3个收藏
全部评论: 0