一个星期初步了解学习react的心得

作为一个实习生，刚刚入职公司。工作需要，在快速的熟悉公司的项目和开发流程，于是在一个星期恶补了react。

最开始看的还是阮老师最经典易懂的教程

        React 入门实例教程

对着这13个demo，原封不动敲了一遍，还是不能懂为什么要用react。只是一直在重复强调一个概念“组件化”，也没有真正去弄懂模块化和组件化的区别在哪儿。现在大概能背出来概念，组件化是UI组件的封装，模块化是功能和数据的封装。剩下的也只能自己去酝酿了。react的组件含义与web components没有联系，web compoents是底层标准，而上层框架（例如react）是可以磨平这个差异的，从而建立组件化思想。

其实把这一些demo敲了一遍过后就能知道react的基本语法和API使用，JSX语法是更直观的react风格的代码风格。花括号就是他典型的特征{}。

我一直认为总结笔记是学习新东西最快的方法，所以给大家推荐一款APP“印象笔记”。也有好多人喜欢的是有道云笔记，这个就看个人爱好了。

从开始的项目文件来说，我上手的就是公司的项目，一个完整的目录结构就大概像这样的。公司的项目是用yarn和npm共同使用开发模块的，所以会有package.json和yarn.lock文件。在目录文件中要提醒一下的就是，src是源码文件，.babelrc是babel配置文件。

react的入口文件是router/index.js ，当然这个也是可以设置的。常用的还是这个index.js。

Babel是一个转码器，可以将ES6代码转化为ES5代码。Babel的配置文件在上文提到过，这个文件存放在根目录下，使用Babel 的第一步就是要配置好这个文件。文件的主要是来设置规则和插件。要想再深入了解一下，这时候又需要百度一下了，百度里面的阮一峰老师的很多教程都不错，在这也为大家推荐一下。

Babel 入门教程

在react代码中，入口代码是render方法，render方法必须返回一个JSX元素。必须要用一个外层的JSX元素把所有的内容包裹起来。

展示代码：

render() {


        return (<Tooltip>
            
        </Tooltip>)
    }
}

在这段代码中，要写的所有元素都会在Tooltip这个组件中。

值得一提的是react中的props属性，要想在组件中传值，props属性就有作用。

在Component组件中使用this.props.data就可以取得data 中的值。

this.props对象属性与组件属性一一对应

this.props.children属性是遍历了所有的节点。

（因为学习的知识比较零散，所以在记录起来也会比较零散，这就是非系统学习，紧急突击的弊端，所以要想学好一个东西还是有规划有目标的去学。）

在react中最重要的属性应该就是state了吧，react是一个状态机，体现在state上（state是组件的私有属性）。通过与用户的交互实现不同的状态，然后再去渲染UI，这样就让用户的数据和界面保持一致了。

react更新的组件state，结果就会重新渲染（不需要操作DOM），一句话说就是用户的界面会随着状态的改变而改变。

初始化state（state只能在本组件中去初始化，只能在本组件中去修改或者访问，还是因为state是私有的。）

不要直接的去修改state的值，应该使用setState()方法去设置。

在这里又要提出一个概念，“热更新”。在进入公司之前我是自学过vuejs的，那时候是对着视频一点点去学，也并没有什么老师去教我。那时候还不动热更新，百度一下也能找到热更新的概念，但是还是不懂。公司的导师给我安排的第一个任务就是搭建项目的热更新，后面才真正理解了热更新就是实时刷新，当编辑好了代码按ctrl+s的时候浏览器就会自动刷新了，这样就会大大的提高开发的效率。而vuejs是自带热更新的，它的项目不用特意去搭建，项目文件初始化完成过后就会是一个热更新项目了。vuejs还是一个轻量级的框架，学起来还是挺有意思的，如果时间允许的情况下是建议大家把前端的三大框架都学完的。

高级程序员 = 程序员 + Google

如果想要让自己的慢慢进阶，就应该多百度或者谷歌一下，会在这里学会很多东西。

以上都是个人总结出来的，肯定也有不对的地方，欢迎交流指点，互相学习。