深刻浅出React和Redux学习笔记（一）

React新的前端思惟方式

React的介绍：

1. 如何初始化一个React项目；
2. 如何建立一个React组件；
3. React的工做方式；

1.初始化一个React项目

1.1 create-react-app工具

create-react-app是经过npm发布的安装包，在安装完成Node.js和npm后，在命令行工具中安装create-react-app:

$ npm install --global create-react-app

初始化命名为first_react_app的第一个React项目：

$ create-react-app first_react_app

打开此项目，并运行此项目：

$ cd first_react_app
$ npm start

编译完成后，浏览器会自动打开一个网页，指向本机地址：http://localhost:3000/.

2.增长一个新的React组件

React的首要思想是经过组件(component)来开发应用。

组件(component):可以完成某个特色功能的独立的、可重用的代码。

基于组件的应用开发是普遍使用的软件开发模式，采用分而治之的方法。

2.1 JSX

JSX:JavaScript的语法扩展(eXtension),在javascript中能够编写HTML代码。

2.2 JSX是进步仍是倒退

HTML表明内容，CSS表明样式，JavaScript表明交互行为，但这三种语言在三种不一样的文件中，实际上把不一样的文件分开管理了，并非逻辑上的“分而治之”。

React的组件能够把JavaScript、HTML和CSS的功能放在一个文件中，实现了真正的组件封装。

3.分解React应用

无

4.React的工做方式

React的理念：

归结为一个公式， UI=render(data)

公式的含义：用户看的界面(UI),应该是一个函数(render)的执行结果，只接受数据(data)做为参数。这个函数是一个纯函数。

纯函数：没有任何反作用，输出彻底依赖于输入的函数；两次函数若是输入相同，获得的结果也会完成相同；最终的用户的界面，在render函数确认的状况下彻底取决于输入的数据。

React实践的是“响应式编程”(Reactive Programming),也是React为何叫React的缘由。

Virtual DOM

React应用经过重复渲染来实现用户交互。

React利用Virtual DOM,每次只渲染最少的DOM元素。

Web前端优化的一个原则：尽可能减小DOM操做

5.React工做方式的优势

React利用函数式编程的思惟来解决用户界面渲染的问题，最大的优点是开发者的开发效率会大大提高，开发出来的代码可维护性和可阅读性也大大加强。

React强制全部组件按照数据驱动渲染的模式来工做，不管应用的规模多大，都能让程序处于可控范围内。