hexo-blog/source/_posts/React 条件渲染.md

title: React 条件渲染 author: Gamehu tags:

• 实践 categories:
• 工作 date: 2019-03-22 18:14:00 ---

产品1.1时，有较大需求的调整，映射到代码则意味着很多功能需要改造或者新增，此时才发现前期由于只求快，代码的可维护性太差，导致要改造模块功能太麻烦，所以就想着边改造边对代码进行重构，一步步提升性能和可维护性。

这个过程我顺便用Lighthouse跑了一下我们的页面，结果挺崩溃的。

我相当不能接受这个结果，遂列出了优化行动项

1. 深入学习React
   1. 官网再详细看一遍
   2. 极客时间上React学完
   3. medium.com上找对应的React、Redux文章
2. 尽可能少的渲染
   1. 掌握react的条件渲染规则
   2. 辨识什么情况下用Redux
   3. 父子组件、公共组件的定义和搭配
3. code review
   1. 代码逻辑
   2. 代码可维护性
   3. 渲染次数
   4. 第三方组件风险

React的条件渲染

官方的文章说的很详细，我很舒服。

https://reactjs.org/docs/reconciliation.html

这篇文章虽然老了点但是讲的通俗易懂，编于更深入的理解React的Reconciliation

https://tylermcginnis.com/react-elements-vs-react-components/

然后我们再谈怎么阻止多余的渲染

官方是这么说的：

Preventing Component from Rendering In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output.

所以最简单的方式就是当不需要某个模块输出是那就return null，从而避免渲染;

因为我们是React+Redux，梳理代码后得出如下有效技巧：

1. 子组件添加state判断
2. 合理记录state用于条件判断是否需要渲染
3. 为元素设置key，选择不会动态变化得作为key，比如id之类的，杜绝使用index
4. 必要的时候设置shouldComponentUpdate
5. 卸载组件后记住重置状态
6. 利用devtool调试并提升代码性能

参考： {% blockquote robinwieruch https://www.robinwieruch.de/conditional-rendering-react/ All React Conditional Rendering Techniques %}

{% endblockquote %}

{% blockquote React https://reactjs.org/docs/faq-internals.html Virtual DOM and Internals %}

{% endblockquote %}

{% blockquote React https://reactjs.org/docs/conditional-rendering.html Conditional Rendering %}

{% endblockquote %}