告别刀耕火种的时代

前端开发技术栈发展飞速，新技术不断横空出世，大前端的时代已经来临，目前一个前端开发者如果说只会使用HTML，CSS，JAVASCRIPT这前端三板斧的技能，并仍不思进取的进行着传统模式的开发，迟早会在和不断涌入这个领域的新人的角逐中淹没淘汰。所以开发人员要有点紧迫感，不断学习和提高自己的业务水准，了解前端开发领域的新动态，以保证在这个行业中屹立不倒，饭碗不掉。
目前前端领域最火热的top3技术Angular | Vue | React，开发过程中都是基于Es6语法规范进行编写的，之前的学习和开发都是围绕Es6以下版本进行的，所以最早学习Angular的时候好多东西都没理清楚，不过学完Angular1.0并在项目开发中也得到了一些实践，Angular 2.0发布后感觉自身基础知识的缺乏就没再进一步学习它。不能一口吃个胖子，没有基础知识的支撑而去学习更高端的技术简直就是浪费生命。经此经验教训，静心基础夯实，再回过头来对top3中的React进行了了解，React的开发模式一度吸引了我的好奇心，所以开始决定对React进行系统的学习，也将学习过程中的学习笔记整理出来以便后期的查阅和复习。
在学习React之前，我已经做好了学习它所需要的基础技术支撑。除了之前所说的三板斧以外，也掌握了Es6的基础知识、自动化构建工具Webpack的配置及使用，npm包管理器的使用，以及用nodeSever开启本地服务、Eslint代码规范检查、热加载等技术。
是时候解放双手，告别刀耕火种的时代了！

开启新征程

React 是一个用于构建用户界面的JS库。也就是说React是 MVC开发模式当中视图层，是一个构建视图的js库。

创建虚拟Dom对象

let AppDom = React.createElement(
   'div',
    {
        data : datas
    },
    child
)

将虚拟Dom对象渲染到页面上

ReactDOM.render(
    AppDom,
    document.getElementById(‘root’)，
    function(){
        alert(‘成功渲染div’)
   }
)

创建组件

let AppC = React.createClass(
    render(){
        return (
            <div id='dddd' >
                <div >xxxx</div>
            </div>
        )
    }

由于组件实际是一个function需要将function将转化为虚拟Dom对象

let AppCo = React.createElement(
AppC
)

将转化后组虚拟Dom对象渲染到页面上

ReactDOM.render(
    AppC,
    document.getElementById('root’)
)

react推荐Es6及jsx写法然后用bable工具进行编译

class App extends Component{
    render(){
        return (
            <div className = "box" >
                <div>xxx</div>
            </div>
        )
    }
}

ReactDOM.render(
    <App data={datas}/>,
    document.getElementById('root')
)

虚拟 Dom Vs 原生Dom

虚拟Dom其本质是一个js对象
虚拟Dom是原生 Dom经过react的修改封装的，去除了原生Dom身上无用的属性和方法，更加节省内存，能减少性能的消耗从而提高应用的质量。
虚拟 Dom渲染成实际Dom的过程中会进行batching(批处理)和高效的Diff算法，从而只对真正发生变化的部分进行实际的DOM操作
React掩盖了底层的 DOM 操作，用声明式的方式来描述我们目的，从而让代码更容易维护。

更详细的解说请移步 React虚拟DOM浅析