笔记----深刻浅出《React和Redux》第一章

一、概念与关系：

    （1）React是一个JavaScript语言的工具库，React自己并不依赖于Node.js，可是开发中用到的诸多工具须要Nodejs的支持。

    （2）安装Node.js的同时也就安装了npm，npm是Node.js的安装包管理工具。

    （3）Facebook提供了快速配置React应用环境的工具( 经过npm 进行安装 )：   create-react-app

 　　　　　步骤一：

　　　　　　在确认 Node.js 和 npm 安装好以后，命令行中执行下面的命令安装全局  create-react-app: （在MAC上输入这个命令可能要加上 sudo 获取权限）

　　　　　　

 　　　　   步骤二： 用cd命令 到须要建立项目的目录下建立项目

                  

　　　　　　最后

　　　　　　

 

　　　　    步骤三：npm start打开本地服务器，端口3000

                                  

　　　　　　初始化目录

                         

 

二、编写计算点击数组件 

                 

 

                       

  

                   

　　　　　　注意：

　　　　　　（1）在从"react"中引入React，是为了支持JSX语法

　　　　　　（2）在从"react"中引入Component，由于Component是全部组件的基类，提供不少组件共有的功能

　　　　　　（3）JSX中使用的元素不单单是HTML元素，还能够是React组件（React组件元素的首字母必需要大写）

　　　　　　（4）JSX的onClick事件处理方式相比HTML的onclick方式 ，优势以下：

　　                i.  onclick添加的事件处理函数是在全局环境下执行的，容易污染全局环境，

                          而JSX的onClick上挂载的函数都控制在组件内；

                      ii.  当不少个DOM元素添加onclick事件,会影响网页性能

                          而JSX的onClick，并无产生直接使用onclick的HTML，使用了事件委托的方式处理点击事件，不管有多少个onClick出现，最后都只是在DOM树上添加了一个事件处理函

                          数，挂载最顶层的DOM节点上。全部点击事件都被这个事件处理函数捕获，而后根据具体组件分配具体函数（优化了性能）

　　　　　　　 iii.在删除事件对应的DOM元素而忘记删除对应的事件处理函数，则还会引起内存泄漏问题

　　　　　　　　 而JSX处于生命周期unmount时，会自动清理事件处理函数（避免了内存泄漏问题）

 

三、添加样式

                    

 

                   

 

 四、React的“响应式编程”思想：

　　UI = render（data）

　　其中，

           render() 是“纯函数（输出只由参数决定，不依赖外部变量，并不会修改传入的引用类型参数的值）”

　　　  UI的变化只取决与data的变化

 

 五、Virtual DOM概念：

　　Virtual DOM是存在于JS空间的树状结构，每次渲染React组件时，都会和上一次的Virtual DOM进行对比，最后只改变有差别部分