[JavaScript知识库]【深入浅出React和Redux】

初始化React项目

create-react-app

使得开发人员从配置工作中解脱出来，无需过早关注技术栈细节，比如转义js需要使用babel,打包使用webpack,bulid使用grunt或gulp

create-react-app是npm发布的安装包，提前安装好Node.js和npm

创建React组件

组件开发是分而治之的方法，大应用分解为小组件，每个组件只关注某个特定功能，组件组合起来、可构成一个功能庞大的应用。分解要巧妙，组件能够在不同场景下重用，不但能构建庞大的应用，还能构建灵活的应用。每个组件就是一块砖，应用是一座楼，想要一次锻造就创建一座楼是不现实的。要锻造很多砖，通过排列组合，才能构建伟大的建筑。

JSX最终会被转译成依赖于React的表达式

JSX

是js的语法扩展，在js文件中编写html一样的代码

JSX中使用的元素不局限于Html中的元素，可以是任何一个react组件。第一个字母大写。

传统html内容、css样式、js行为，只是把技术分开管理，不是逻辑上的分而治之

根据同一件事的代码应该有高耦合的设计原则，把实现这个功能所有代码放在一个js文件

onclick:添加的事件处理函数是在全局环境，污染全局环境

给dom添加onclick事件，可能会影响网页性能

使用onclick的Dom元素，动态从Dom删除，需要把时间处理器销毁，忘了销毁，造成内存泄漏

JSX不存在这样的问题

onClick挂载的每个函数，都可以控制在组件范围内，不会污染全局空间

onClick使用事件委托方式处理点击事件，无论有多少个onClick出现，其实最后都只在DOM树上添加一个事件处理函数，挂在最顶层的Dom节点上。所有的点击事件都被这个事件处理函数捕获，然后根据具体组件分配给特定函数，使用事件委托的性能比每个onClick都挂载一个事件处理函数要高。

React控制组件的声明周期，在unmount的时候能自然清除相关的所有事件处理函数，内存泄漏不再是问题

React组件把js、css、html功能放在同一个文件，实现真正的组件封装

React工作方式