Month: March 2017

1.引入与导出方式不同 //ES5 var React = require(“react”); //ES6 import React, { Component, PropTypes } from ‘react 2.导入： ES5使用require导入，而ES6使用了import //ES5 module.exports = Test; //ES6 export default Test; 3.创建组件的方式不同 //ES5 var Test = React.createClass( {        ………. } ); //ES6 class Test extends Component {        ………. } 4.初始化组件属性的方式以及限制组件属性类型的方式不同 //ES5 var Test = React.createClass({       getDefaultProps: function() {              return {                    myPro: 10              };       },       propTypes: {              myPro: React.PropTypes.number. isRequired       } }); //ES6 class Test extends Component {        static defaultProps = {              myPro: 10        };        static propTypes = {              myPro: React.PropTypes.number. isRequired        }; } 5.初始化方法不同 //ES5 getInitialState: function() {       ………..       return {            myState: 10       } } //ES6 constructor(props){         super(props);         this.state = {             myState: 10         };…

注意：需要翻墙，软件的下载去官网下载 atom-react-autocomplete–项目内，组件名及状态的自动补全 autocomplete-js-import–模块导入智能提示 emmet-jsx-css-modules– React内的Emmet补全，非单纯的expand【class => className 】！！ language-javascript-jsx – JavaScript, ES6, ES7, React JSX, Flow支持 language-babel – 写React必不可少【atom内开发react的核心插件！！！】 react-es6-snippets – es6写法的react snippet，挺实用 react-snippets – 和上面的搭配“口味更加”哦！！。。 js-func-viewer– 新插件，但是很实用，可以查看函数的结构~~~~ atom-react-native-autocomplete – RN的智能补全，react开发也能受用一部分，相当实用！智能提示非autocomplete那种【类似静态语法分析器】 autocomplete-modules – 模块智能提示【node_modules】 atom-beautify – 代码格式化，相当有用。

兼容性我们从一下几个方向来说 1.H5兼容性（移动端） 2.HTML兼容性 3.JavaScript兼容性     H5兼容性（移动端） H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放 //二、JS动态判断 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write(‘<meta name=”viewport” content=”width=640,…