<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <pre></pre> 讯享网
ES6-写法 React.Component（有状态组件可以用）
React 升级后就支持了 ES6 的class语法，我们可以使用的方式创建组件，这也是目前官方推荐创建有状态组件的方式。用 ES6 重写上面 SwitchButton 组件的例子：
讯享网
与React.createClass创建组件的不同之处：
1. import
与这里使用了 ES6 的语句替代方法导入模块，其中可以直接从模块中导入变量名，这种写法更加简洁直观。
2. 初始化 state
React 使用 ES6 的“类”继承实现时，去掉了这个 hook 函数，state的初始化放在构造函数方法中声明。
3. this 绑定
React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
创建组件时，事件函数并不会自动绑定this，需要我们手动绑定，不然this将不会指向当前组件的实例对象。以下有三种绑定this的方法：
（1）. 在constructor中使用bind()进行硬绑定
（2.） 直接在元素上使用bind()绑定
讯享网
(3). ES6 的 =>：Arrow Function（箭头函数）
它可以很方便的使直接指向（它的作用等同于大家熟悉的，但后者会让代码变得混乱，Arrow Function 就很好的解决了这一问题）
（4）默认属性和状态不同
组件属性类型propTypes及其默认props属性defaultProps配置不同
React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用的方法来获取默认组件属性的
讯享网
React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：
组件初始状态state的配置不同
React.createClass创建的组件，其状态state是通过方法来配置组件相关的状态；
React.Component创建的组件，其状态state是在中像初始化组件属性一样声明的。
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/206774.html