react优化总结--(永久更新中)

1.箭头函数和bind的使用不当

类函数里声明方法的时候最好一次声明，只定义一次，什么意思，咱们知道在类里面声明方法而后传递出去调用的时候this会丢失，通常用bind或者箭头函数解决，可是咱们也要避免两种书写方式，即避免传子组件props的时候写内敛箭头函数或者内敛的bind方式，由于这时候若是咱们在子组件调用这个函数，父组件state改变从新渲染后， this.xxx()}或者 每次会返回一个新的函数对象，props改变后，子组件也会从新渲染，这就形成了没必要要的性能浪费。

2.key值的命名不当

咱们遍历数据的时候喜欢用map顺便把子节点的key设置成map的key，这样当数据改变，好比上面的在第二个位置新添了一个X节点的时候，上次的B是赋值为1，下次一样的节点B被赋值为2，这样一样的DOM却被赋值了不一样的key值就会形成不可预料的结果。咱们要想办法至少在同一组里保持key的一致性，这也是保持DOM的稳定性。react的virtual dom和diff算法也正是创建在DOM稳定性的前提下的高效性。

3.动态的节点需不须要设置key

刚刚上面也说了DOM节点咱们通常会设置一个key值，可是当出现这种状况下的dom节点的时候呢。

<div>
    <p>hello</p>
    {
        someCondition? <p>what?</p> : null
    }
    <p>world</p>
</div>

JSX的本质就是一个轻量级javascript对象，在babel转译下变成createElment函数的嵌套，这个对象存的值依次为 标签名，key值(参数值)，文本内容。回到原问题，因此无论这个条件是否成立，在someCondition后面都有一个占位符占在那里，这样key在这里设不设置就没有提升react性能之说了。(都有对象占着,null也是一个对象)

4.react的声明式编程 （Declarative Programming)

说到声明式或者响应式要和jq来作对比，我在用jq写代码的时候，咱们其实本身一些核心的操做，无论是dom的操做仍是数据的调用，咱们都是直接用的jq的API去实现，当jq的API改变的时候，咱们又不得不花大量精力去修改和维护，这就是命令式编程的特色。而react与此不一样，react的声明式设计是让咱们在用本身写的函数和代码去完成咱们想要的核心功能，并无用到太多系统级的核心API，react是让咱们去实现生命周期函数，实现render函数，当react实现方式会改变，但你写的code并不会改变，由于你写的code只是去响应它要作的东西。好比react16发布的时候，核心在于react底层的diff算法的提高，但咱们的代码并不须要作很大的改变。

5.JSX

html，css，js彻底分离仍是推崇相关逻辑的代码（html，js，css）放在一个组件呢（这也正是react的jsx），JSX须要babel转译

6.值引用问题在react中也存在

父级所传递的props，做为子级的state，是否会产生值引用对象影响问题？也就是我更改子级state，父级props被相应更改。答案是会，react不会作深拷贝，形成的结果不可预知。