react中的portals，es6和JSX

                                                                                 react中的portals

portals(门户网站)

portal提供了一种一流的方式，将一个存在于DOM节点之中的一个子节点，用于去父组件节点之外的地方。其语法规则是：

在createPortal中，第一个参数指的是任何一个渲染中的React的一个子节点，例如元素，字符串或者是一个片段。第二个参数指的是容器中的一个DOM节点。

portal的使用

在react中你的子节点通常情况下是以下面的这种形式去呈现的

然而在某些时候，插入子节点到不同的DOM中是很有用的，它使用的方式，就如同下面的例子所示

一个典型的使用例子是，当你的父组件中有overflow: hidden或者是z-index时，你又需要将你的子节点呈现出来，你就需要使用到portal，例如：对话框、悬浮框或者是工具提示时。

冒泡事件通过portal

尽管通过门户你可以把你的子节点放在任何的位置上，但是其他部分的操作还是如果其在一个父组件中的子节点中的操作一样，他在实质上还是原来的父组件。因此其还在它原来的React树中，而是不是在DOM树当中。这当然也包括冒泡事件在内。接下就提供一个实例来进行说明，首先在html中，创建两个根节点

其父组件是在第一个根节点中，第二个节点是冒泡事件的放置的地方

在上面的这个例子中，很清楚明白的描述了上面说的的那种关系，在父组件中去捕获门户冒泡，首先Modal组件中渲染的是子节点的内容，在Parent组件中，你将handleclick事件绑定在子节点上。因此就完成了门户冒泡的过程的实现过程。

react中的Es6语法

如果在react中没有es6的语法，我们书写前面所写的有状态组件时，就需要去借助create-react-class去实现

上面是使用了es6语法的有状态组件的命名方式，下面是使用create—react-class去实现的有状态组件的代码

那么去初始化props的语法不使用es6语法时的方式是

去设置初始化的state的形式如果下面的代码所示

在使用.bind(this)时，在es6的语法中，你需要去设置绑定，但是当你使用了create-react-class时，你就不需要自己去绑定

如果你觉得当你使es6绑定语法这个模板太繁琐时，你可以使用一个正在实验当中的语法，它不需要你去绑定事件。

当你将你需要的绑定事件的方法用箭头函数去写的时候，你就不需要去绑定，这种方法目前还在实验的阶段。因此对于事件中使用方法有三种形式，其中最后一种还在实验阶段，有可能会变。

1.在构造器中去绑定这个方法 ； 2 . 使用createReactClass的方法 3. 使用实验阶段的箭头函数的方法

ximin系统

有时，非常不同的组件可能共享一些公共功能。这些有时被称为横切关注点。createReactClass允许您为此使用遗留的mixin系统。如果一个组件使用多个mixin，并且多个mixin定义了相同的生命周期方法(即，当组件被销毁时，多个mixin希望进行一些清理)，则保证调用所有的生命周期方法。在mixin上定义的方法按照mixin列出的顺序运行，然后是对组件的方法调用。下面进行的就是一个实际例子的说明。

JSX

如果在react中没有JSX语法规则

你就得使用上面的这种形式去写你的代码，显然如果用上面的这种代码的形式，你去书写时是非常的繁杂。