Reactjs性能优化(下)

React 实现pure render的时候，bind(this)导致re-render?

先上代码：

export default class  extends Component {
...
render() {
const {name,age} =this.state;
return (
  <div>
    <Person name={name} age={age} onClick={this._handleClick.bind(this)}></Person>//bug 所在
  </div>
)
}...}

发现一个问题，对于Person这个子组件来说，在父组件re－render的时候，即使Person得前后两个props都没改变，它依旧会re－render。。即使用immutable.js也不好使。。。 
原来啊，父组件每次render，_handleClick都会执行bind(this) 这样_handleClick的引用每次都会改。。所以Person前后两次props其实是不一样的。。 
那怎么办？把bind（this）去掉？不行 还必须得用 
真正的答案是 让父组件每次render 不执行bind（this），直接提前在constructor执行好，修改之后

constructor(props){
super(props)
this._handleClick＝ this._handleClick.bind(this)}
<Person name={name} age={age} onClick={this._handleClick}></Person>

为了尽可能减少re-render，props中尽可能的使用基本类型,且函数都在constructor中执行好？？

如何解决？

避免将函数作为props传递，使用EventEmitter来对父子组件的依赖解耦。

EventEmitter是什么？

简单来说，使用EventEmitter，你可以监听一个事件，并且可以执行一个你绑定的回调函数。就像前端的javascript一样，你可以通过addEventListener来绑定用户的鼠标键盘交互事件，EventEmitter是基于发布订阅模式，因此我们可以通过订阅事件然后再发布。我们可以看到很多前端javascript库是支持订阅发布模式（angularjs,vuejs），但Node.js是内建的。

有一个重要的问题：你为什么要使用事件模式？因为在Node.js里，他可以替代各种深层嵌套的加调。Node.js很多方法是要异步运行的，这意味着当这个方法完成时，你就要传递一个可回调的函数。最后，你会发现你的代码看起来像一个巨大的漏斗。为了防止这种情况出现，你可以使用监听事件来优化这些事件，这可以更好地组织你的代码，而不是使用回调嵌套的方式。

使用事件方式还有一个好处，就是可以使你的代码得到很好的解耦。一个事件发出后，如果没有被监听，那么他也不会报错。

基本使用姿势 EventEmitter

var events = require("events");
var EventEmitter = require("events").EventEmitter;
var ee = new EventEmitter();
 ee.on("someEvent", function () {
 console.log("event has occured");
});
ee.emit("someEvent");

首先我们创建一个新的EventEmitter对象。这个对象有两种主要方法: on 和 emit; on这个方法有两个参数，第一个参数是我们要监听事件的名称，在上面的例子，要监听事件的名称就是"someEvent"。当然你可以定一个更好的名字。第二个参数是在事件发生时，要执行的函数。

现在要触发事件，你可以通过事件名称EventEmitter的实例emit方法。就是上面代码的最后一行。如果你运行代码，将得到打印到控制台的文本。

这是最基本的 EventEmitter 使用，你也可以触发事件时传递一个对象 
传送门：node的事件模块应用

小结

为了避免不必要的re-render，请不要将函数传入props中，取而代之使用EventEmitter。

尽量遵循此原则，props始终传递基本类型或者只包含基本类型的对象