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
	2. 父子组件、公共组件的定义和搭配
3. code review
	1. 代码逻辑
	2. 代码可维护性
	3. 渲染次数
	4. 第三方组件风险


## React的条件渲染 ##



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

[https://reactjs.org/docs/reconciliation.html](https://reactjs.org/docs/reconciliation.html "Reconciliation")

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

[https://tylermcginnis.com/react-elements-vs-react-components/](https://tylermcginnis.com/react-elements-vs-react-components/ "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 %}